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

今天群里有一个同学发了一个问题,问题起因是他定义了一个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如不见就好了。

原文地址:https://www.cnblogs.com/justnotwo/p/8684877.html

时间: 2024-09-29 09:12:29

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

事件冒泡与默认行为

在说事件冒泡之前,我们先说说事件对象(Event) Event 在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素.事件的类型.与特定事件相关的信息) 所有浏览器都支持Event对象,但支持方式不同 IE中的事件对象:window.event /* 封装Event对象 IE:window.event */ function getEvent(event){ return event?event:window.event; } 事件冒泡 什么是

事件冒泡与捕获&amp;amp;事件托付

设想这样一种情况 一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件应该有个先后顺序 ,先触发span还是div? 早期就有两个主流的浏览器厂商各执己见,IE觉得,这个事件首先触发span,然后依次往父节点传递,终于传递到document,(这个过程称为冒泡) 网景浏览器觉得,不论什么事件都首先触发document,然后依次往下传递到span元素,(这个过程称为捕获

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元

javascript阻止事件冒泡及默认事件方式

//阻止事件冒泡 function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true; } } //阻止默认事件 function stopDefault(e) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ){ e.preventDefault(); }els

jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡与阻止冒泡</title> <script src="js/jquery.min.js" type="text/javascript"></script></head><b

阻止事件冒泡与默认行为

1.既阻止事件冒泡又阻止事件默认行为: function stopEvent(e){ //兼容 var e = e || window.event if(e.preventDefault){ e.preventDefault(); e.stopPropagation(); }else { e.returnValue = false; e.cancelBubble = true; return false; } } 2.仅阻止事件冒泡: function stopBubble(e){ var e

javascript如何阻止事件冒泡和默认行为

阻止冒泡:  冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo 就是很好的例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&quo