阻止事件冒泡和默认到事件对象在不同浏览器中的传递

Posted 不二了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阻止事件冒泡和默认到事件对象在不同浏览器中的传递相关的知识,希望对你有一定的参考价值。

今天群里有一个同学发了一个问题,问题起因是他定义了一个drag函数,然后函数内部使用了e进行组织默认实践,结果在360浏览器正常运行但是火狐却报错,e不存在,第一时间有点懵,组织冒泡和组织默认一般都用,那里需要那里用,一般不会出现这种问题。因为新手才有这种操作,但是引发我兴趣,经过一番测试,我发现在360里面时间默认进行了传递,所以在360可以正常运行,但是在火狐里面没有进行传递。然后我传递参数为事件对象进去,执行成功,然后引发了我对几个浏览器不同引擎的猜测和测验。首先上代码,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<form method="get" action="#">
<input type="submit" name="" id="button">
</form>

<script type="text/javascript" src="Jquery.js"></script>
<script type="text/javascript">
$("#button").click(function(e){
    drag()
})
function drag(ev) {
    var newEV=ev||window.event;
        newEV.preventDefault()
        alert("我前面都成功执行了")
}


</script>
</body>
</html>

这是问题代码,在Safari和Google下测试,成功执行了,但是在火狐和IE(ie炸了我不确定是我ie设置问题还是ie本身不能执行。知道的同学可以回复下)下失败了。修改代码,传入事件对象。

$("#button").click(function(e){
    drag(e)
})
function drag(ev) {
    var newEV=ev||window.event;
        newEV.preventDefault()
        alert("我前面都成功执行了")
}

 

所有浏览器都执行成功,(别问所有包不包括ie,ie下载都能失败),因为我将点击事件e作为drag的参数ev传入内部函数再执行。然后进行兼容检测,window.event处理兼容用的很多我就不多说,我这里讨论这个参数有没有用,改变nweEV=window.event,继续执行,然后在Safari和Google下成功组织的get请求,FF失败报错了,ie还在睡觉不能用,所以Safari和Google下事件对象是直接传到了drag里面,所以都成功了,但是FF里面我传入的e,最终执行的newEV却是window.event,所以显示newEV is undefined,这样就简单理解了。以上仅代表个人意见,有失误的地方希望可以提出共勉。

备注:ie睡醒后测试结果我补上,ie虐我千百遍,我待ie如不见就好了。

 

以上是关于阻止事件冒泡和默认到事件对象在不同浏览器中的传递的主要内容,如果未能解决你的问题,请参考以下文章

javascript 跨浏览器事件对象阻止默认事件阻止冒泡兼容写法

js中阻止事件冒泡和浏览器默认行为

js 阻止冒泡 阻止默认事件

阻止事件冒泡,取消浏览器默认行文

阻止事件冒泡 和 阻止事件默认行为

JS阻止事件冒泡的3种方法,以及他们之间的不同