JS禁止WEB页面鼠标事件大全
- 格式:doc
- 大小:32.00 KB
- 文档页数:6
JS鼠标事件
JS鼠标事件是指在使用JavaScript编写网页的时候可以通过监听用户的鼠标行为来做出相应的动作。
当鼠标移动、点击、双击或者悬停到
特定的元素上时,JavaScript会捕获这些行为,并执行一些相应的操作。
JS中操作鼠标事件有以下常用事件:
1、onmouseover:当鼠标悬停在元素上时触发;
2、onmouseout:当鼠标离开该元素时触发;
3、onmousedown:当鼠标点击元素时触发;
4、onmouseup:当鼠标松开时触发;
5、onclick:当鼠标点击时触发;
6、ondblclick:当鼠标双击元素时触发;
7、onmousemove:当鼠标移动到元素上时触发;
8、oncontextmenu:当鼠标右键点击元素时触发;
9、onmouseenter:当鼠标进入元素时触发;
10、onmouseleave:当鼠标离开元素时触发。
使用这些事件,我们可以让网页在响应鼠标动作时可以立刻显示出来,比如当鼠标悬停到某个按钮上时,立刻显示弹出框,提示用户具体操
作等等。
当然,也可以添加其他JS鼠标事件来提升网页的交互性,比
如拖拽、右击等功能。
总之,JS鼠标事件为网页开发者提供了一系列
极其有用的功能,可以给网页带来更好的用户体验。
div遮罩实现禁⽤⿏标(click、hover等)事件这两天在帮⽼师做⽹页,今天想实现在⼀块区域内禁⽌⿏标的各种事件,本来是想在框架模板的js⽂件⾥去修改,但是改代码的时候有点凌乱。
感觉应该⾃⼰把问题想复杂了。
所以想了想要是能实现在⼀个区域内(如:div)遮罩住区域下⽅的操作,强⼤的某度让我很快找到了答案,拿去⼀试,诶~还挺⽅便,⼀试就灵。
所以在此处贴下相应代码仅供参考:1、Javascript 部分代码1function MaskIt(obj){2 var hoverdiv = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0);z-index:5;"></div>'; 3 $(obj).wrap('<div class="position:relative;"></div>');4 $(obj).before(hoverdiv);5 $(obj).data("mask",true);6 }7function UnMaskIt(obj){8 if($(obj).data("mask")==true){9 $(obj).parent().find(".divMask").remove();10 $(obj).unwrap();11 $(obj).data("mask",false);12 }13 $(obj).data("mask",false);14 }2、调⽤⽅法⽐如:我在html中有⼀个div的 id 是“needMask”1<div id="needMask">2 ……3<div>调⽤时,就是⽤函数:1 MaskIt($('#needMask'));恩......end 希望能帮到有需要的盆友:)。
JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例
document.oncontextmenu = function(){return false}; //禁⽌⿏标右键菜单显⽰
var res = document.getElementById('box'); //找到id为box的div
document.body.onmouseup = function(e){ //在body⾥点击触发事件
if(e.button===2){ //如果button=1(⿏标左键),button=2(⿏标右键),button=0(⿏标中间键)
console.log(e); //将传进去的参数打印出来
console.log(e.offsetY); //打印出⿏标点击的Y轴坐标
console.log(e.offsetX); //打印出⿏标点击的X轴坐标
res.style.top = e.offsetY+'px'; //⿏标点击时给div定位Y轴
res.style.left = e.offsetX+'px'; //⿏标点击时给div定位X轴
res.style.display = 'block'; //显⽰div盒⼦
}else{
res.style.display = 'none'; //否则不显⽰div盒⼦
}
}
以上这篇JavaScript⿏标事件,点击⿏标右键,弹出div的简单实例就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
⽹页禁⽤右键菜单和⿏标拖动选择⽅法⼩结⼀、禁⽌⿏标右键菜单: 有如下两种⽅法来禁⽌⿏标右键1、在HTML元素的Body标签中加⼊Javascript事件句柄,代码如下:复制代码代码如下:<body onContextMenu="return false"> 说明:您也可以在⽹页指定的位置禁⽌右键,⽐如您只想在⽹页中的某个图⽚上禁右键防下载,或您只想在⽹页中的⼀段⽂字或表格上禁右键,您也只需将如上红⾊代码加⼊到相应的HTML标签元素中,例:复制代码代码如下:<img src="logo.gif" width=88 height=31 onContextMenu="return false"><!--加在图⽚上--><table onContextMenu="return false"><!--加在表格中--><font onContextMenu="return false">⽂字内容</font><!--加在⽂字上-->2、编写⼀个Javascript函数,然后调⽤事件处理,代码如下:复制代码代码如下:<script language=javascript><!--document.oncontextmenu=mylock1;function mylock1(){event.returnValue=false;}//--></script> 说明:请注意代码⼤⼩写!将如上代码拷贝到⽹页HTML源代码的<head>与</head>之间即可。
如果要对⽹页元素指定的标签进⾏右键屏蔽,只需把document改成相应的⽹页对象标签名即可。
⼆、禁⽌拖动选择⽹页元素: 与上例⼀样也有如下两种⽅法来禁⽌⿏标右键1、在HTML元素的Body标签中加⼊Javascript事件句柄,代码如下:复制代码代码如下:<body onSelectStart="return false"> 说明:与上⾯的禁右键⽤法类似2、编写⼀个Javascript函数,然后调⽤事件处理,代码如下:复制代码代码如下:<script language=javascript><!--document.onselectstart=mylock1;function mylock1(){event.returnValue=false;}//--></script> 说明:请注意语句的⼤⼩写!将如上代码拷贝到⽹页HTML源代码的<head>与</head>之间即可。
JS禁⽤右键、禁⽤Ctrl+u、禁⽤Ctrl+s、禁⽤F12的实现代码先来两个简单粗暴的第⼀个常⽤的函数代码function keycodes(){// 禁⽌右键document.oncontextmenu=function(){return false};document.onkeydown = function(e) {e = window.event || e;var k = e.keyCode;//屏蔽ctrl+u,F12键if ((e.ctrlKey == true && k == 85) || k == 123) {e.keyCode = 0;e.returnValue = false;e.cancelBubble = true;return false;}}}第⼆种⽅法:var arr = [123, 17, 18];document.oncontextmenu = new Function("event.returnValue=false;"),//禁⽤右键document.onselectstart = new Function("event.returnValue=false;"),//禁⽤选中window.onkeydown = function (e) {var code = e.keyCode;if (arr.indexOf(code) > -1) {console.log("中招了", code);e.preventDefault();}}, window.oncontextmenu = function (e) {e.preventDefault();}第三种⽅法:var arr = [123, 17, 18];document.oncontextmenu = new Function("event.returnValue=false;"),//禁⽤右键window.onkeydown = function (e) {var keyCode = e.keyCode || e.which || e.charCode;var ctrlKey = e.ctrlKey || e.metaKey;console.log(keyCode + "--" + keyCode);if (ctrlKey && keyCode == 85) {console.log("ctrl+u");e.preventDefault();}if (arr.indexOf(keyCode) > -1) {console.log("其他");e.preventDefault();}//e.preventDefault();//return false;}⼀些常⽤的代码1、实现禁⽌选中⽂字。
JavaScript中的⿏标事件昨天突发奇想,想做⼀个模拟的⿏标点击⽣成⼩球往下掉的效果。
于是涉及到了js中⼀些⿏标点击事件,接下来我来总结顺便复习⼀下。
⿏标事件包括七个:1. mousedown ⿏标点击按下2. mouseup ⿏标点击抬起3. mouseover ⿏标悬浮4. mouseout ⿏标移出5. mouseenter ⿏标进⼊6. mouseleave ⿏标移出7. mousemove ⿏标移动问题1: mouseout和mouseleave代表的都是⿏标移出事件,那么它们有什么区别呢?接下来准备⼀份html⽂件来做个例⼦HTML部分<div class="big" onmouseout="handleMouseout()" onmouseleave="handleMouseleave()"><div class="sub1">⼦元素1</div><div class="sub2">⼦元素2</div></div>CSS部分.big {width: 400px;height: 400px;background: #aaa;}.sub1 {width: 100px;height: 100px;background: #666;}.sub2 {position: relative;top: 50px;left: 50px;width: 100px;height: 100px;background: #666;}JS部分function handleMouseout () {console.log("mouse out of the {big}")}function handleMouseleave () {console.log("mouse leave of the {big}")}可以看到,当⿏标从「class="big"」的元素中离开时,触发了两个事件mouseout&mouseleave,仅仅如此还不⾜以看出它俩的区别。
两种JS实现屏蔽⿏标右键的⽅法JS屏蔽⿏标右键的两种⽅法,⽐较常⽤的⼀个JS⼩功能,⽤上这个代码后,浏览者在访问你⽹页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要⽤的太多哦,有时候⽤户会反感的。
代码如下:<html><head><title>屏蔽⿏标右键</title></head><body oncontextmenu=self.event.returnvalue=false>第⼀种⽅法:在body标签⾥加上oncontextmenu=self.event.returnvalue=false;<br><script language="javascript"><!--function document.oncontextmenu(){return false;}function nocontextmenu(){if(document.all) {event.cancelBubble=true;event.returnvalue=false;return false;}}--></script>第⼆种⽅法:在body⾥加⼊onmousedown="rclick()" oncontextmenu= "nocontextmenu()"<br><script language="javascript"><!--function rclick(){if(document.all) {if (event.button == 2){event.returnvalue=false;}}}--></script><br>详细情况请查看代码。
J S鼠标事件大全o n M o u s e O v e r I E3|N2|O3当鼠标移动到某对象范围的上方时触发的事件o n M o u s e M o v e I E4|N4|O鼠标移动时触发的事件o n M o u s e O u t I E4|N3|O3当鼠标离开某对象范围时触发的事件o n K e y P r e s s I E4|N4|O当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]o n K e y D o w n I E4|N4|O当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]o n K e y U p I E4|N4|O当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件 事件 浏览器支持 描述o n A b o r t I E4|N3|O图片在下载时被用户中断o n B e f o r e U n l o a d I E4|N|O当前页面的内容将要被改变时触发的事件o n E r r o r I E4|N3|O捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误o n L o a d I E3|N2|O3页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成o n M o v e I E|N4|O浏览器的窗口被移动时触发的事件o n R e s i z e I E4|N4|O当浏览器的窗口大小被改变时触发的事件o n S c r o l l I E4|N|O浏览器的滚动条位置发生变化时触发的事件o n S t o p I E5|N|O浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断o n U n l o a d I E3|N2|O3当前页面将被改变时触发的事件表单相关事件 事件 浏览器支持 描述o n B l u r I E3|N2|O3当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]o n C h a n g e I E3|N2|O3当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]o n F o c u s I E3|N2|O3当某个元素获得焦点时触发的事件o n R e s e t I E4|N3|O3当表单中R E S E T的属性被激发时触发的事件o n S u b m i t I E3|N2|O3一个表单被递交时触发的事件滚动字幕事件 事件 浏览器支持 描述o n B o u n c e I E4|N|O在M a r q u e e内的内容移动至M a r q u e e显示范围之外时触发的事件o n F i n i s h I E4|N|O当M a r q u e e元素完成需要显示的内容后触发的事件o n S t a r t I E4|N|O当M a r q u e e元素开始显示内容时触发的事件编辑事件 事件 浏览器支持 描述o n B e f o r e C o p y I E5|N|O当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件o n B e f o r e C u t I E5|N|O当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件o n B e f o r e E d i t F o c u s I E5|N|O当前元素将要进入编辑状态o n B e f o r e P a s t e I E5|N|O内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 o n B e f o r e U p d a t e I E5|N|O当浏览者粘贴系统剪贴板中的内容时通知目标对象o n C o n t e x t M e n u I E5|N|O当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<b o d y>中加入o n C o n t e n t M e n u="r e t u r n f a l s e"就可禁止使用鼠标右键了]o n C o p y I E5|N|O当页面当前的被选择内容被复制后触发的事件o n C u t I E5|N|O当页面当前的被选择内容被剪切时触发的事件o n D r a g I E5|N|O当某个对象被拖动时触发的事件 [活动事件]o n D r a g D r o p I E|N4|O一个外部对象被鼠标拖进当前窗口或者帧o n D r a g E n d I E5|N|O当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了o n D r a g E n t e r I E5|N|O当对象被鼠标拖动的对象进入其容器范围内时触发的事件o n D r a g L e a v e I E5|N|O当对象被鼠标拖动的对象离开其容器范围内时触发的事件o n D r a g O v e r I E5|N|O当某被拖动的对象在另一对象容器范围内拖动时触发的事件o n D r a g S t a r t I E4|N|O当某对象将被拖动时触发的事件o n D r o p I E5|N|O在一个拖动过程中,释放鼠标键时触发的事件o n L o s e C a p t u r e I E5|N|O当元素失去鼠标移动所形成的选择焦点时触发的事件o n P a s t e I E5|N|O当内容被粘贴时触发的事件o n S e l e c t I E4|N|O当文本内容被选择时的事件o n S e l e c t S t a r t I E4|N|O当文本内容选择将开始发生时触发的事件数据绑定 事件 浏览器支持 描述o n A f t e r U p d a t e I E4|N|O当数据完成由数据源到对象的传送时触发的事件o n C e l l C h a n g e I E5|N|O当数据来源发生变化时o n D a t a A v a i l a b l e I E4|N|O当数据接收完成时触发事件o n D a t a s e t C h a n g e d I E4|N|O数据在数据源发生变化时触发的事件o n D a t a s e t C o m p l e t e I E4|N|O当来子数据源的全部有效数据读取完毕时触发的事件o n E r r o r U p d a t e I E4|N|O当使用o n B e f o r e U p d a t e事件触发取消了数据传送时,代替o n A f t e r U p d a t e事件o n R o w E n t e r I E5|N|O当前数据源的数据发生变化并且有新的有效数据时触发的事件o n R o w E x i t I E5|N|O当前数据源的数据将要发生变化时触发的事件o n R o w s D e l e t e I E5|N|O当前数据记录将被删除时触发的事件o n R o w s I n s e r t e d I E5|N|O当前数据源将要插入新数据记录时触发的事件数据绑定 事件 浏览器支持 描述o n A f t e r P r i n t I E5|N|O当文档被打印后触发的事件o n B e f o r e P r i n t I E5|N|O当文档即将打印时触发的事件o n F i l t e r C h a n g e I E4|N|O当某个对象的滤镜效果发生变化时触发的事件o n H e l p I E4|N|O当浏览者按下F1或者浏览器的帮助选择时触发的事件o n P r o p e r t y C h a n g e I E5|N|O当对象的属性之一发生变化时触发的事件o n R e a d y S t a t e C h a n g e I E4|N|O当对象的初始化属性值发生变化时触发的事件。
<script language="Javascript"><!--function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键function window.onhelp(){return false} //屏蔽F1帮助function document.onkeydown(){if ((window.event.altKey)&&((window.event.keyCode==37)|| //屏蔽Alt+ 方向键←(window.event.keyCode==39))) //屏蔽Alt+ 方向键→{alert("不准你使用ALT+方向键前进或后退网页!");event.returnValue=false;}/* 注:这还不是真正地屏蔽Alt+ 方向键,因为Alt+ 方向键弹出警告框时,按住Alt 键不放,用鼠标点掉警告框,这种屏蔽方法就失效了。
以后若有哪位高手有真正屏蔽Alt 键的方法,请告知。
*/if ((event.keyCode==8) || //屏蔽退格删除键(event.keyCode==116)|| //屏蔽F5 刷新键(event.ctrlKey && event.keyCode==82)){ //Ctrl + Revent.keyCode=0;event.returnValue=false;}if (event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11if (event.ctrlKey && event.keyCode==78) event.returnValue=false; //屏蔽Ctrl+nif (event.shiftKey && event.keyCode==121)event.returnValue=false; //屏蔽shift+F10if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnValue = false; //屏蔽shift 加鼠标左键新开一网页if ((window.event.altKey)&&(window.event.keyCode==115)) //屏蔽Alt+F4 {window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");return false;}}</script>。
<body oncontextmenu="return false"></body><!-- 禁用右键: --><script>function stop(){return false;}document.oncontextmenu=stop;</script><body onselectstart="return false"> 取消选取、防止复制oncopy="return false;" oncut="return false;" 防止复制四:禁止查看源文件<html><head><script>function clear(){Source=document.body.firstChild.data;document.open();document.close();document.title="看不到源代码";document.body.innerHTML=Source;}</script></head>五、图片下载限制<script language="javascript">function Click(){if(window.event.srcElement.tagName=="IMG"){alert('图片直接右键');window.event.returnValue=false;}}document.oncontextmenu=Click;</script><META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 插入图片时加入galleryimg属性<img galleryimg="no" src="">禁止右键保存把下面代码放在<head>和</head>之间<SCRIPT LANGUAGE=java script>function click() {alert('对不起,您不能保存此图片,谢谢您的理解和支持!') }function click1() {if (event.button==2) {alert('对不起,您不能保存此图片,谢谢您的理解和支持!') }} function CtrlKeyDown(){if (event.ctrlKey) {alert('不当的拷贝将损害您的系统!') }}document.onkeydown=CtrlKeyDown;document.onselectstart=click;document.onmousedown=click1;</SCRIPT>方式二:在页面中加入如下js代码:原理:屏蔽右键<script>function document.onmousedown(){if(event.button==2||event.button==3){alert( "右健被禁止")return false}}</script>网页防复制代码禁止查看网页源文件代码插入网页即可。
让点击事件不生效的方法点击事件是指在页面上鼠标点击某个元素时触发的动作。
有时候,我们希望在某些情况下点击事件不生效,这可能是出于多种原因,比如避免误操作、防止重复提交等。
在页面开发中,有多种方法可以实现点击事件不生效,下面我将详细介绍其中几种常用的方法。
1. CSS pointer-events 属性pointer-events 属性用于指定元素是否可以触发鼠标事件。
通过将该属性设置为"none",可以使元素无法触发点击事件。
具体用法如下:css.element {pointer-events: none;}这样,设置了该属性的元素将无法触发鼠标事件,包括点击事件。
2. JavaScript 事件监听器通过JavaScript 可以监听并处理元素的事件。
我们可以通过添加事件监听器来阻止点击事件的触发。
具体做法如下:javascriptdocument.getElementById("element").addEventListener("click", function(e) {e.preventDefault();});上述代码中,我们通过addEventListener 方法为元素添加了一个点击事件的监听器,并在监听器内部使用preventDefault() 方法来阻止默认的点击行为。
3. jQuery 的off() 方法如果项目中使用了jQuery,我们可以使用其提供的事件处理方法off() 来取消元素上的点击事件绑定。
具体用法如下:javascript("#element").off("click");上述代码中,我们使用了jQuery 的选择器选中了元素,并使用off() 方法取消了元素上的点击事件。
4. 给元素添加disabled 属性对于一些表单元素(如按钮、输入框等),我们可以直接给元素添加disabled 属性来禁用点击事件。
javascript实现禁⽌⿏标滚轮事件平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给⼒。
⽽是因为⽕狐给⼒过头了,完全不顾其它浏览器的感受标新⽴异了。
除了⽕狐之外,所有的浏览器都可以使⽤MouseWheel事件来处理⿏标滚轮的响应。
但是⽕狐却偏偏不⽀持MouseWheel,⽽使⽤⽆厘头的DOMMouseScroll,这玩意⼉除了⽕狐以外其它浏览器都不兼容。
也就是说,对于⿏标滚轮事件的处理,⽕狐只能使⽤DOMMouseScroll。
⽽⾮⽕狐则只能使⽤MouseWheel。
这两种事件实现的原理不同,他们处理的数据也不同。
var firefox = erAgent.indexOf('Firefox') != -1;firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) :(img.onmousewheel = MouseWheel);function MouseWheel(e) {e = e || window.event;if (e.stopPropagation) e.stopPropagation();else e.cancelBubble = true;if (e.preventDefault) e.preventDefault();else e.returnValue = false;}我们来看个完整的代码<!DOCTYPE html><style>span {font:14px/20px 微软雅⿊;}#counter {width:50px;height:20px;border:1px solid #CCC;background:#F9F9F9;font:14px/20px Consolas;text-align:center;margin:10px;}</style><span>使⽤⿏标滚轮调整数值⼤⼩</span><br/><div id="counter">0</div><script>//判断浏览器var isIE=erAgent.match(/MSIE (\d)/i);isIE=isIE?isIE[1]:undefined;var isFF=/FireFox/i.test(erAgent);//获取元素var counter=document.getElementById("counter");//⿏标滚轮事件if(isIE<9) //传统浏览器使⽤MouseWheel事件counter.attachEvent("onmousewheel",function(){//计算⿏标滚轮滚动的距离//⼀格3⾏,每⾏40像素,所以除以120var v=event.wheelDelta/120;counter.innerHTML=counter.innerHTML*1+v;//阻⽌浏览器默认⽅法return false;});else if(!isFF) //除⽕狐外的现代浏览器也使⽤MouseWheel事件counter.addEventListener("mousewheel",function(e){//计算⿏标滚轮滚动的距离var v=e.wheelDelta/120;counter.innerHTML=counter.innerHTML*1+v;//阻⽌浏览器默认⽅法e.preventDefault();},false);else //奇葩的⽕狐使⽤DOMMouseScroll事件counter.addEventListener("DOMMouseScroll",function(e){//计算⿏标滚轮滚动的距离//⼀格是3⾏,但是要注意,这⾥和像素不同的是它是负值var v=-e.detail/3;counter.innerHTML=counter.innerHTML*1+v;//阻⽌浏览器默认⽅法e.preventDefault();},false);</script>以上所述就是本⽂的全部内容了,希望⼤家能够喜欢。
<!--禁止鼠标右键代码--><noscript><iframe src=*.html></iframe></noscript><script language=javascript><!--if (window.Event)document.captureEvents(Event.MOUSEUP);function nocontextmenu(){event.cancelBubble = trueevent.returnValue = false;return false;}function norightclick(e){if (window.Event){if (e.which == 2 || e.which == 3)return false;}elseif (event.button == 2 || event.button == 3){event.cancelBubble = trueevent.returnValue = false;return false;}}document.oncontextmenu = nocontextmenu; // for IE5+ document.onmousedown = norightclick; // for all others //--></script>1.将彻底屏蔽鼠标右键,无右键菜单<body oncontextmenu="window.event.returnvalue=false">也可以用于网页中Table框架中<table border oncontextmenu=return(false)><td>no</table>2.取消选取、防止复制<body onselectstart="return false">3.不准粘贴<body onpaste="return false">4.防止复制<body oncopy="return false;" oncut="return false;">5.IE地址栏前换成自己的图标<link rel="Shortcut Icon" href="favicon.ico">说明:关于favicon.ico文件的制作。
⽤纯CSS禁⽌⿏标点击事件JavaScript有⼀个preventDefault⽅法, 他可⽤以来取消事件的默认动作。
⽐如取消打开链接,选择⽂本或拖放等。
event.preventDefault()该⽅法将通知 Web 浏览器不要执⾏与事件关联的默认动作(如果存在这样的动作)。
例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调⽤任意的事件句柄,通过调⽤该⽅法,可以阻⽌提交表单。
注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻⽌默认动作。
⽆论哪种情况,调⽤该⽅法都没有作⽤。
这种⽅法可以阻⽌当前元素的浏览器默认⾏为,但并不阻⽌事件被⽗级及document响应。
如果想彻底取消事件,则可使⽤stopPropagationevent.stopPropagation()该⽅法将停⽌事件的传播,阻⽌它被分派到其他 Document 节点。
在事件传播的任何阶段都可以调⽤它。
注意,虽然该⽅法不能阻⽌同⼀个Document 节点上的其他事件句柄被调⽤,但是它可以阻⽌把事件分派到其他节点。
这两种是在JS中的常⽤取消事件的⽅法,但是其实还有⼀种⽤纯css就能实现取消事件响应的⽅法,pointer-events,使⽤起来更加简单,它可以:1 阻⽌⽤户的点击动作产⽣任何效果2 阻⽌缺省⿏标指针的显⽰3 阻⽌CSS⾥的hover和active状态的变化触发事件4 阻⽌JavaScript点击动作触发的事件⽐如以下CSS就顺起到将禁⽤的按钮灰掉的效果.disabled {pointer-events: none;cursor: default;opacity: 0.6;}这种⽅法明显⽐js代码更加灵活,可惜ie9不⽀持。
js鼠标事件有哪些推荐文章Flash鼠标事件怎么实现热度: java鼠标和键盘事件怎么实现热度: js获取桌面鼠标键盘事件怎么实现热度: java鼠标双击事件怎么实现热度: js怎么切换鼠标右键事件热度:学习前端的同学你们知道怎么js鼠标事件有多少个吗?不知道的话跟着店铺一起来学习了解js鼠标事件。
js鼠标事件大全onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件onMouseMove IE4|N4|O 鼠标移动时触发的事件onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件事件浏览器支持描述onAbort IE4|N3|O 图片在下载时被用户中断onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload IE3|N2|O3 当前页面将被改变时触发的事件表单相关事件事件浏览器支持描述onBlur IE3|N2|O3 当前元素失去焦点时触发的事件[鼠标与键盘的触发均可]onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件onSubmit IE3|N2|O3 一个表单被递交时触发的事件滚动字幕事件事件浏览器支持描述onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件编辑事件事件浏览器支持描述onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了] onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件onDragStart IE4|N|O 当某对象将被拖动时触发的事件onDrop IE5|N|O 在一个拖动过程中,释放鼠标键时触发的事件onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件onPaste IE5|N|O 当内容被粘贴时触发的事件onSelect IE4|N|O 当文本内容被选择时的事件onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件数据绑定事件浏览器支持描述onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件onCellChange IE5|N|O 当数据来源发生变化时onDataAvailable IE4|N|O 当数据接收完成时触发事件onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件数据绑定事件浏览器支持描述onAfterPrint IE5|N|O 当文档被打印后触发的事件onBeforePrint IE5|N|O 当文档即将打印时触发的事件onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件。
JS实现禁⽌⽤户使⽤Ctrl+⿏标滚轮缩放⽹页的⽅法本⽂实例讲述了JS实现禁⽌⽤户使⽤Ctrl+⿏标滚轮缩放⽹页的⽅法。
分享给⼤家供⼤家参考,具体如下:为什么会有⼈会使⽤ctrl+⿏标滚轮缩放⽹页?坚决禁⽌!<html><head><title>测试</title><script language="javascript">var scrollFunc=function(e){e=e || window.event;if(e.wheelDelta && event.ctrlKey){//IE/Opera/Chromeevent.returnValue=false;}else if(e.detail){//Firefoxevent.returnValue=false;}}/*注册事件*/if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);}//W3Cwindow.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari</script></head><body style="font-size:30px;"><br>SCRIPT脚本控制页⾯不随ctrl+⿏标滚轮⽽缩放。
<br><br>CSS可以控制页⾯⽂字⼤⼩不随浏览器设置⽽改变。
</body></html>PS:这⾥再为⼤家提供⼀款在线javascript事件参考表供⼤家参考:更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
<!--禁止鼠标右键代码--><noscript><iframe src=*.html></iframe></noscript><script language=javascript><!--if (window.Event)document.captureEvents(Event.MOUSEUP);function nocontextmenu(){event.cancelBubble = trueevent.returnValue = false;return false;}function norightclick(e){if (window.Event){if (e.which == 2 || e.which == 3)return false;}elseif (event.button == 2 || event.button == 3){event.cancelBubble = trueevent.returnValue = false;return false;}}document.oncontextmenu = nocontextmenu; // for IE5+ document.onmousedown = norightclick; // for all others //--></script>1.将彻底屏蔽鼠标右键,无右键菜单<body oncontextmenu="window.event.returnvalue=false">也可以用于网页中Table框架中<table border oncontextmenu=return(false)><td>no</table>2.取消选取、防止复制<body onselectstart="return false">3.不准粘贴<body onpaste="return false">4.防止复制<body oncopy="return false;" oncut="return false;">5.IE地址栏前换成自己的图标<link rel="Shortcut Icon" href="favicon.ico">说明:关于favicon.ico文件的制作。
你可以先在FW中做一个图片,属于你自己站点一个小图标。
然后在ACD see将文件属性改为*.ico,然后将你做的*.ICO 文件传到你的服务器目录中,然后就可以使用以上代码来实现,当别人登陆你的站点时,地址栏里使用的就是你自定义的图标了。
很PP哦。
6.可以在收藏夹中显示出你的图标在网页的〈head〉〈/head〉间加入以下语句:〈link rel="shortcuticon" href="http://…/icon.ico"〉即可。
其中 icon.ico 为 16x16 的图标文件,颜色不要超过 16 色。
说明:制作方法和上面的一样。
只是显示的方式不同,这个是在别人收藏你的网页地址时显示的个性图标。
也很PP.7.关闭输入法<input style="ime-mode:disabled">说明:这段代码是在表格提交时用到的。
也就是在输入数据时不可以使用其他输入法模式。
网页经典代码(二)8.永远都会带着框架<script language="javascript"><!--if (window == top)top.location.href = "frames.htm";// --></script> 说明:frames.htm为你的网页,这也是保护页面的一种方法9.防止被人frame<SCRIPT LANGUAGE=javascript><!--if (top.location != self.location)top.location=self.location;// --></SCRIPT>10.网页将不能被另存为<noscript><iframe src=*.html></iframe></noscript>说明:<noscirpt>的用法很广,其中一条就是可以使JS广告失效。
11.查源文件<input type=button value=查看网页源代码onclick="window.location = 'view-source:'+'/test.htm';">12.COOKIE脚本记录,有很大的用处哦function get_cookie(Name) {var search = Name + "="var returnvalue = "";if (documents.cookie.length > 0) {offset = documents.cookie.indexOf(search)if (offset != -1) { // if cookie existsoffset += search.length// set index of beginning of valueend = documents.cookie.indexOf(";", offset);// set index of end of cookie valueif (end == -1)end = documents.cookie.length;returnvalue=unescape(documents.cookie.substring(offset, end)) }}return returnvalue;}function loadpopup(){if (get_cookie('popped')==''){openpopup()documents.cookie="popped=yes"}}说明:以上是JS代码,请自己加起始符和结束符<SCRIPT LANGUAGE=javascript>function click() {alert('禁止你的左键复制!') }function click1() {if (event.button==2) {alert('禁止右键点击~!') }}function CtrlKeyDown(){if (event.ctrlKey) {alert('不当的拷贝将损害您的系统!') }} document.onkeydown=CtrlKeyDown;document.onselectstart=click;document.onmousedown=click1;</SCRIPT><noscript><iframe src="*.htm"></iframe></noscript><SCRIPT language=javascript><!--if (window.Event)document.captureEvents(Event.MOUSEUP);function nocontextmenu(){event.cancelBubble = trueevent.returnValue = false;return false;}function norightclick(e){if (window.Event){if (e.which == 2 || e.which == 3)return false;}elseif (event.button == 2 || event.button == 3){event.cancelBubble = trueevent.returnValue = false;return false;}}document.oncontextmenu = nocontextmenu; // for IE5+document.onmousedown = norightclick; // for all others//--></SCRIPT>以上是禁止右键和另存为3、让页面文字不被选中和复制<body onselectstart="return false">或<body oncopy=alert(’对不起,禁止复制!’);event.returnvalue=false;>除非你做的是框架式结构的网站再加上网页将不能被另存为<noscript><iframe src=*.html></iframe></noscript>说明:<noscirpt>的用法很广,其中一条就是可以使JS广告失效。
<!--禁止鼠标右键代码--><noscript><iframe src=*.html></iframe></noscript><script language=javascript><!--if (window.Event)document.captureEvents(Event.MOUSEUP);function nocontextmenu(){event.cancelBubble = trueevent.returnValue = false;return false;}function norightclick(e){if (window.Event){if (e.which == 2 || e.which == 3)return false;}elseif (event.button == 2 || event.button == 3){event.cancelBubble = trueevent.returnValue = false;return false;}}document.oncontextmenu = nocontextmenu; // for IE5+document.onmousedown = norightclick; // for all others//--></script>保证可以。