成都网站建设设计

将想法与焦点和您一起共享

javascript事件拦截的简单介绍

js阻止默认事件的方法

js阻止默认事件的方法是preventDefault。

我们提供的服务有:网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、昆都仑ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的昆都仑网站制作公司

浏览器会给事件预设一定的默认事件处理,使用这个方法可以阻止默认事件,防止默认事件影响当前的程序。

JS如何阻止事件

把 var timeTask = ... 前面的var去掉,使 timeTask 成为全局变量。

然后在 alert("智能闹钟已关闭"); 的前面插入一行:clearInterval(timeTask);

JavaScript中事件捕获和事件冒泡以及如何阻

浏览器中对事件的处理机制默认为事件冒泡,例如

div id='div1'div id='div2'div id='div3'/div/div/div

#div1{ width: 500px;height: 500px; background: rgb(12,42,31);}#div2{ width: 450px;height: 450px; background: rgb(212,142,1);}#div3{ width: 350px;height: 350px; background: rgb(1,242,153);}

绑定click事件:

div1.onclick=function(){ alert("div1")}div2.onclick=function(){ alert("div2")}div3.onclick=function(){ alert("div3")}

此时,当单击中间的div3时,先后弹出div3, div2, div1,此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡:

div1.addEventListener('click',function(obj){ alert("div1")},true);//如果未false则为事件冒泡,不填的话,默认falsediv2.addEventListener('click',function(obj){ alert("div2")},true);div3.addEventListener('click',function(obj){ alert("div3")},true);

这里将第三个参数设为true,指定事件处理机制为事件捕获。此时再次单击div3时,会依次弹出div1, div2, div3,与之前的相反。

而IE中只有事件冒泡,且没有addEventListener事件,取而代之的是attachEvent。

但是有时候,我们不喜欢出现事件冒泡或者捕获,希望单击div3时,只弹出div3。这时就要用到下面阻止事件冒泡的方法。

1. 阻止冒泡事件

主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上,在事件传播的任何阶段都能使用。使用方法如下(兼容IE):

function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }

2. 阻止默认事件

像submit这类的表单元素,都会绑定默认事件,如果不阻止默认事件,则绑定的其他方法也会无效。使用方法如下(兼容IE):

function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false;}

javascript 的事件冒泡如何阻止?

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。

例子:function stopBubble(e){if (e e.stopPropagation)

e.stopPropagation()elsewindow.event.cancelBubble=true}把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了。

希望能帮助到你。


当前标题:javascript事件拦截的简单介绍
标题网址:http://chengdu.cdxwcx.cn/article/dsdijec.html