JavaScript -- onmousedown 事件

最新推荐文章于 2022-08-30 20:41:57 发布
最新推荐文章于 2022-08-30 20:41:57 发布
阅读量2.9k 收藏
点赞数
分类专栏： HTML+XML+JS+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuijy/article/details/24844745
版权

html文件 你可能能查看到这个页面的源代码，但是你需要做一些工作

<!DOCTYPE html>
<html>
<head>
	<title>onMousedown capture</title>
	<script src="script.js"></script>
</head>
<body>
	<h1>Important source data that someone might want to look at.</h1>
</body>
</html>

script.js 这个脚本会阻止经验不太丰富的用户在页面上打开快捷菜单 

if (typeof document.oncontextmenu == "object") {
	if (document.all) {
		document.onmousedown = captureMousedown;
	}
	else {
		document.oncontextmenu = captureMousedown;
	}
}
else {
	window.oncontextmenu = captureMousedown;
}

function captureMousedown(evt) {
	if (evt) {
		var mouseClick = evt.which;
	}
	else {
		var mouseClick = window.event.button;
	}
	
	if (mouseClick==1 || mouseClick==2 || mouseClick==3) {
		alert("Menu Disabled");
		return false;
	}
}

下面对这段脚本语言做些解释： 

if (typeof document.oncontextmenu == "object") {
	if (document.all) {
		document.onmousedown = captureMousedown;

第一块代码检查浏览器是否是Firefox，这种浏览器使用window.oncontextmenu(因此不知道document.oncontextmenu)。如果它不是Firefox，再检查document.all，这是检查浏览器是否是IE的简便方法。如果它是IE，就在触发onmousedown时运行captureMousedown()。 



	else {
		document.oncontextmenu = captureMousedown;

如果到达了这里，就说明访问者使用的是Safari，这种浏览器需要在document对象上设置oncontextmenu。 



else {
	window.oncontextmenu = captureMousedown;

最后，如果浏览器是Firefox，就让window的oncontextmenu事件调用captureMousedown()函数。 



function captureMousedown(evt) {

这个函数要处理onmousedown和oncontextmenu事件。基于Netscape的浏览器和Safari在触发事件时会自动地生成和传递evt参数，这个变量包含关于事件的信息。 



	if (evt) {
		var mouseClick = evt.which;
	}
	else {
		var mouseClick = window.event.button;
	}

这个evt变量存在（访问者点击了鼠标的右键），就可以通过检查evt.which来判断用户单击的是哪个按钮。如果用户使用IE，用户操作的结果会在wondiw.event.button中找到。无论是哪种情况，结果都储存在mouseClick变量中。 



	if (mouseClick==1 || mouseClick==2 || mouseClick==3) {
		alert("Menu Disabled");
		return false;
	}

如果mouseClick是1、2或3，就弹出一个警告框，向用户指出这个功能以已经禁用了，并返回false。返回false会阻止显示菜单窗口。


acjymer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4095
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
js 鼠标按下并移动事件
water_Popcorn的博客
07-28 3311
鼠标按下并移动事件
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1672
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
事件（JS）
KennGum的博客
07-11 454
事件 事件对象 事件冒泡（Bubble） 事件的绑定 事件的传播 拖拽 滚轮事件 键盘事件 事件对象 onmousemove 该事件将会在鼠标在元素中移动时被触发 事件对象 当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下 鼠标滚轮滚动的方向 在IE8中，相应函数被处罚时，浏览器不会传递事件对象 在IE8及以下的浏览器中，是将事件对象作为 window对象的属性保存的
JS事件之鼠标事件
qq_57215961的博客
05-25 2606
鼠标事件的类型 onclick：单击事件 ondblclick：双击 oncontextmenu：右键菜单 onmouseover：鼠标移入 onmouseout：鼠标移出 onmouseenter：鼠标移入 onmouseleave：鼠标移出 onmousedown：鼠标按下 onmouseup：鼠标抬起 onmousemove：鼠标移动 onmouseover、onmouseout与onmouseenter、onmouseleave 两者都有鼠标移入移出的作用，但是建议使用on
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
weixin_46106512的博客
03-29 4637
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、阻止事件冒泡和默认行为二、拖拽1, 实现拖拽相关的三大事件:2, 实现拖拽思路：1, 给目标元素添加onmousedown事件(鼠标按下事件)2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:3, 在onmousedown事件(鼠标按下事件)发生以后，给document.
JavaScript常用事件介绍
12-12
JavaScript事件是网页交互的核心，它允许开发者在特定的用户行为或状态变化时执行代码。JavaScript事件分为多种类型，包括但不限于以下几种： 1. **鼠标事件**： - `onclick`：鼠标点击元素时触发。 - `...
JavaScript 事件参考手册
10-30
7. **document 对象的方法和属性**: `document.lastModified`返回网页的最后修改日期，`document.ondblclick`和`document.onmousedown`分别用于处理双击和单击事件。`document.body.scrollTop`和`scrollLeft`用于...
JavaScript 事件查询综合
10-29
9. `document.ondblclick` 和 `document.onmousedown`: 分别在用户双击鼠标和按下鼠标时触发的事件处理程序。 10. `document.body.scrollTop` 和 `document.body.scrollLeft`: 用于获取或设置网页的垂直和水平滚动...
JavaScript 事件记录使用说明
10-29
JavaScript 事件记录是Web开发中的重要概念，它允许开发者捕捉并响应用户在网页上的各种交互行为。通过事件，JavaScript能够监听用户的动作，并在特定事件发生时执行相应的代码，从而实现动态效果和交互功能。 首先...
javascript-jquery学习笔记.docx
最新发布
10-20
JavaScript 是一种客户端脚本语言，用于增强网页的交互性和动态性，而 jQuery 是一个 JavaScript 库，它简化了 JavaScript 的使用，提供了丰富的选择器、动画效果和事件处理。 在 JavaScript 中，字符串可以使用反...
熟悉一下oncontextmenu事件的知识
weixin_30500289的博客
06-22 1286
定义和使用 只要点击鼠标右键，就触发oncontextmenu事件并打开上下文菜单。 需要注意的是：所有主流浏览器都支持oncontextmenu事件，但其中的contextmenu元素只有FireBox支持。 兼容性 语法 1、没有添加contextmenu元素 <!DOCTYPE html> <html> <head>...
JavaScript 笔记（3）
Hot_snail的博客
01-11 158
1：DOM 简介 通过HTML DOM，可访问JavaScript HTML文档的所有元素。 1：HTML DOM 当网页被加载时，浏览器会创建页面的文档对象模型（document object model）。HTML DOM模型被构造为对象的数。 通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。 JavaScript能够改变页面中的所有HTML元素。 ...
使用“onmousedown”和“onmouseup”实现长按事件
Jazelle的博客
07-20 4072
通过“onmousedown”和“onmouseup”实现长按一直执行事件，回弹停止执行。
js函数中onmousedown 和 onclick的区别和联系
一个执着的程序员
05-17 7701
这两个事件很常见。 了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作。 通常使用onclick的时候也可以使用onmousedown，使用onclick的时候更多一些。 今天碰到了非使用onmousedown不可的时候，故特此记录。 先说一下区别：onclick是在鼠标点击弹起之后触发的事件。onmousedown是在鼠标按下之后触发的事件。 简单的说onclick
12-事件
qq_41222991的博客
08-30 228
事件
onmousedown活用之鼠标拖动
KELION1234的博客
11-16 314
这个布局蛮简单的就是一个div块,通过定位,固定位置 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #div...
onClick和onMouseDown的区别
Queen_zdd的博客
09-09 1907
onClick:是鼠标点击弹起后触发的的事件，即一次完整的鼠标点击过程。 onMouseDown:是指鼠标按下的瞬间触发的。 onMouseUp：在鼠标弹起的时候触发；有特殊情况，不管在哪里按下，只要弹起的时候在你目标区域上，就会触发。 即onClick=onMouseDown+onMouseUp
关于用HTML显示XML文件内容的问题
Learning By Doing
03-21 4047
前提概要： 大二下半学期了，该跟着项目组老师做项目管理，我分到了张利彪的项目组里，张老师并不告诉我们具体做什么，只是让我们私下里学习东西，我主要学习HTML和XML，让我们利用想象力并用上已有的手段做出来我们想做的东西，虽然不像其他的项目组老师分给同学们具体的内容，但感觉在一个只为学习而学习的环境下，充分开动自己的大脑去想一些不存在或者很少见的东西确实还是有点难度的。不过万事开头难嘛，再难还是要
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值