首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

evt.preventDefault在IE和鼠标移动时的边缘事件中不起作用,甚至尝试了evt.returnValue = false;但不能停止传播

evt.preventDefault是一个事件方法,用于阻止事件的默认行为。在IE浏览器和鼠标移动时的边缘事件中,evt.preventDefault可能不起作用,甚至尝试使用evt.returnValue = false也不能停止事件的传播。

这个问题可能是由于不同浏览器对事件处理的机制不同导致的。在IE浏览器中,事件对象是通过window.event来获取的,而其他浏览器则是通过函数参数传递的。因此,在IE浏览器中使用evt.preventDefault可能无效。

为了解决这个问题,可以使用以下方法来停止事件的传播:

  1. 使用evt.stopPropagation()方法:这个方法可以停止事件在DOM树中的传播,但不会影响事件的默认行为。可以在事件处理程序中添加这个方法来阻止事件的进一步传播。
  2. 使用return false:在某些情况下,可以通过在事件处理程序中返回false来阻止事件的默认行为和传播。但需要注意的是,这种方法只适用于某些特定的事件,如onclick事件。
  3. 使用事件委托:事件委托是一种将事件处理程序绑定到父元素上,通过事件冒泡来处理子元素的事件的方法。通过在父元素上使用evt.preventDefault可以阻止事件的默认行为。

总结起来,为了在IE浏览器和鼠标移动时的边缘事件中停止事件的传播,可以尝试使用evt.stopPropagation()方法、return false或者事件委托的方式来解决。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云函数(云原生):https://cloud.tencent.com/product/scf
  • 腾讯云数据库(数据库):https://cloud.tencent.com/product/cdb
  • 腾讯云服务器(服务器运维):https://cloud.tencent.com/product/cvm
  • 腾讯云CDN(网络通信):https://cloud.tencent.com/product/cdn
  • 腾讯云安全产品(网络安全):https://cloud.tencent.com/solution/security
  • 腾讯云音视频处理(音视频、多媒体处理):https://cloud.tencent.com/product/mps
  • 腾讯云人工智能(人工智能):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(物联网):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发(移动开发):https://cloud.tencent.com/product/mobdev
  • 腾讯云对象存储(存储):https://cloud.tencent.com/product/cos
  • 腾讯云区块链(区块链):https://cloud.tencent.com/product/baas
  • 腾讯云虚拟专用云(元宇宙):https://cloud.tencent.com/product/vpc
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DOM事件基本概念大总结(前端必备)

事件流 这一概念源自于对事件触发对象思考。例如常见点击事件鼠标移动事件。这些事件发生之时,往往不只是点击或者移动到某一特定元素上。...事件冒泡 即事件从指定元素开始传播到最外层元素,并且该事件不仅会在指定元素上发生,还会在传播过过程每一个元素上发生。...IE 级 attachEvent() DOM 2 级一样用来添加事件,只有两个参数 "事件" "处理函数",不能设置冒泡或者捕获。...这样一来就不会继续捕获下去了 IE 事件对象 为什么不能统一呢,非要学两套 IE 事件对象与 DOM 级有一定差异 常用属性 cancelable 默认值为 false,true 为取消冒泡。...事件目标,与 DOM target 相似 type 事件类型 event 对象获取 IE event 对象作为 window 对象一部分存在,可以通过 window.event 来获取

1.8K20
  • JavaScript(进阶)

    , 这样当事件被触发,响应函数将会按照函数绑定顺序执行 这个方法不支持IE8及以下浏览器 attachEvent() IE8可以使用attachEvent()来绑定事件 参数: 事件字符串...关于事件传播网景公司微软公司有不同理解 微软公司认为事件应该是由内向外传播,也就是当事件触发,应该先触发当前元素上事件,然后再向当前元素祖先元素上传播,也就说事件应该在冒泡阶段执行。...网景公司认为事件应该是由外向内传播,也就是当前事件触发,应该先触发当前元素最外层祖先元素事件,然后向内传播给后代元素 W3C综合了两个公司方案,将事件传播分成了三个阶段 捕获阶段 捕获阶段从最外层祖先元素...当鼠标在被拖拽元素上按下,开始拖拽 onmousedown 当鼠标移动被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开,被拖拽元素固定在当前位置 onmouseup 提取一个专门用来设置拖拽函数..., * 如果不希望发生这个行为,则可以通过return false来取消默认行为 * * 但是这招对IE8不起作用 */ return false; }; } 1

    1.5K20

    事件

    如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生要调用句柄。事件是某个行为或者触发,比如点击、鼠标移动........当用户点击鼠标 当网页已加载 当图像已加载鼠标移动到元素上 当用户触发按键......button时候,由于事件冒泡,bodyclick事件也会触发,但是调用这句后,事件停止传播 IE事件对象 访问IEevent对象有几种不同方式,取决于指定事件处理程序方法。...image.png 跨浏览器事件对象 虽然DOMIEevent对象不同,基于它们相似性,我们还是可以写出跨浏览器事件对象方案 function getEvent(e) { return...3: 解释IE事件冒泡DOM2事件传播机制? IE事件冒泡: 事件从目标元素向父级元素传递,直到传递到 window ( document) 停止。 ?

    1.4K30

    深入理解事件

    下面的方式1、方式2属于 html 绑定事件,方式3、方式4方式5属于js代码绑定事件,其中,方式45属于事件监听,而方式5是最推荐做法。...阻止事件冒泡捕获 默认情况下,多个事件处理函数会按照DOM事件流模型顺序执行。如果子元素上发生某个事件,不需要执行父元素上注册事件处理函数,那么我们可以停止捕获冒泡,避免没有意义函数调用。...因为当事件传播到outC上处理函数,通过stopPropagation阻止了事件继续传播,所以不会继续传播到冒泡阶段。...根据事件冒泡原理,不管是原有li还是新增li,只要鼠标一移入li中就等同于鼠标移入ul,自然会触发ul鼠标移入事件,之后我们只要在ul事件函数定义相关行为就可以了。...所有浏览器都支持event对象,支持方式不同,DOMevent对象必须作为唯一参数传给事件处理函数,IEevent是window对象一个属性。

    83240

    JavaScript 事件绑定

    使用这两组函数时候,先把区别说一下:1.IE不支持捕获,只支持冒泡;2.IE添加事件不能屏蔽重复函数;3.IEthis指向是window而不是DOM对象。...4.传统事件上,IE是无法接受到event对象使用了attchEvent()却可以,但有些区别。...IE不能屏蔽,需要单独扩展或者自定义事件处理。IE不能传递this,可以call过去。...PS:IE事件绑定函数attachEvent()detachEvent()可能在实践不去使用,有几个原因:1.IE9就将全面支持W3C事件绑定函数;2.IE事件绑定函数无法传递this;3...四.事件对象其他补充 W3C提供了一个属性:relatedTarget;这个属性可以mouseovermouseout事件获取从哪里移入从哪里移出DOM对象。

    3.4K60

    事件

    这个事件并不是DOM2级事件规范规定,其得到广泛应用,DOM3将其纳入了标准; mousedown 用户按下任意鼠标按钮触发; mouseenter 鼠标光标从元素外部首次移动到元素范围内触发...;这个事件不冒泡,而且鼠标移动到后代元素上不会触发;DOM3被纳入标准; mouseleave 在位于元素上方鼠标光标移动到元素范围之外触发;这个事件不冒泡,而且鼠标移动到后代元素上不会触发;DOM3...当鼠标从上图“区域2”移动到“区域3”,会同时触发“mouseleave”“mouseout”事件; 当鼠标从上图“区域2”移动到“区域1”(子元素),只会触发“mouseout”; 需要注意...pageXpageY:鼠标指针页面位置。没有滚动条情况下,同clientXclientY值。 screenXscreenY:鼠标指针相对于整个屏幕坐标信息。 ?...造成上述问题原因: 第一种,从文档移除带有事件处理程序元素(removeChildreplaceChild),或innerHTML替换页面某一部分时,带有事件元素被删除掉了,事件处理程序无法被当成垃圾回收

    3.3K51

    写一个H5图片预览组件

    事件影响到下方元素 componentWillUnmount() { // 模态框销毁后移除事件外层容器 this.root.removeEventListener('touchmove...主要用到事件如下: onPinch(e) 双指缩放触发,e.zoom为缩放倍数 onMultipointStart(e) 多点触摸触发 onPressMove(e) 手指按下并移动触发,e.deltaX..., e.deltaY为两个方向上移动距离 onTouchEnd(e) 触摸停止触发 <AlloyFinger onPinch={this.onPinch} onPressMove={this.onPressMove...需要注意是这里zoom是相对于每一次缩放手势开始放大倍数,因此需要监听onMultipointStart事件开始缩放记录下原始scale值。...(); } 另外,onTouchEnd判断当前手指移动距离是否足够大,判断是否切换到下一张图片。

    1.5K11

    js实现简易拖拽

    (e).x) mouseY = parseInt(getMouseXY(e).y) // 鼠标相对元素左边缘坐标 offsetX = mouseX...document 对象上绑定 mousemove mouseup 事件,不在拖拽元素上绑定是因为当鼠标移动太快而超出元素范围时会停止拖拽,而绑定在 document 上则可以避免这样事情发生。...// 获取元素所在坐标 boxX = box.offsetLeft boxY = box.offsetTop 一般鼠标的位置使用 pageX / pageY 获取,但是 IE 不支持这两个属性。...所以 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 获取鼠标的位置 if (e.pageX)...,Chrome,Opera,Safari中指外边缘,即将该元素边框宽度计算在内,firefox则不包含边框值 pageX,pageY 指相对文档窗口左上角距离,不会随滚动条移动 clientX,clientY

    6.3K10

    JavaScript事件

    1) 事件流 描述是从页面接受事件顺序 1. 事件冒泡 (IE事件流) 事件开始由最具体元素接收,然后逐级向上传播到不具体节点。...IE事件对象 使用DOM0级方法添加事件,event对象可以作为window对象一个属性存在,使用attachEvent添加事件处理程序时候,event对象会作为参数传入事件处理函数 dom.onclick...>)一个或多个字符 resize 当浏览器窗口被调整到一个新高度或者宽度,会触发 scroll 当用户滚动带滚动条元素内容该元素上触发resize,scroll会在变化期间重复被激发...任意鼠标按钮按下触发 mouseup 释放鼠标按钮触发 mousemove 鼠标元素内部移动时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部,将其首次移入另一个元素边界之内触发...相关元素,event特殊属性 1.客户区坐标位置 clientX,clientY 事件发生鼠标指针视口中水平和垂直坐标 2.页面坐标位置 pageX,pageY 事件发生鼠标指针页面本身而非视口坐标

    1.4K30

    js事件(event)

    ,相当于文档鼠标的坐标; target事件源;事件概念:事件最终发生在页面的那个元素上; 事件事件传播是息息相关 事件传播包括:冒泡捕获;事件传播是浏览器处理事件行为机制,冒泡阶段或者捕获阶段...这样表单就不会产生提交行为了; document.onmousewheel = function(){return false;}//IEchrome方式,取消鼠标的滚轮默认行为,网页滚动条就不会动了..., 在理解事件传播时候要注意两点: 一、是事件本身在传播,而不是绑定在事件方法传播; 二、是并非所有的事件都会传播,像onfocus,onblur等事件就不会传播,onmouseenteronmouseleave...需求:如下HTML代码,当你点击这个页面一个元素,弹出这个元素对应标签名; outer inner <...W3C标准是同一事件上,先绑定方法先执行,并且不能重复绑定同一个方法同一个事件上,但是IE6、7、8,如果绑定方法少于9个,执行顺序是相反,超过9个,执行顺序就是混乱,这些IE问题都是比较严重

    6.8K30

    【JS】395-重温基础:事件

    1.1 事件冒泡 冒泡事件(Event Bubbling):事件开始由最具体元素接收(文档嵌套层次最深那个节点),然后逐层向上传播到较为不具体节点(文档),看下示例代码: 元素)捕获阶段不接收事件,即在捕获阶段,事件从 document对象到 再到 后就停止,进入“处于目标”阶段,事件 元素上发生...{ // 只有当 event cancelable 属性为true事件 event.preventDefault();} 立即停止事件DOM传播 通过调用 event.stopPropagation...Web浏览器事件类型有很多,DOM3级事件规定有以下几类事件类型: UI事件:当用户与页面上元素交互触发; 焦点事件:当元素失去或获取焦点触发; 鼠标事件:当用户通过鼠标页面操作触发; 滚轮事件...键,默认false button : 整数,表示按下哪个鼠标键,默认0 relatedTarget : 对象,表示与事件相关对象,只 mouseover mouseout使用 案例: var btn

    1K60

    事件高级

    DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div,同时你也单击了div父元素,甚至整个页面。 ​...事件冒泡:IE最早提出,事件开始由最具体元素接收,然后逐级向上传播到到DOM最顶层节点过程。...onclick attachEvent(ie) 只冒泡阶段触发        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略        //... IE6~8 ,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 获取查找。 ?...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。 生活代理: ? js事件代理: ?

    1.4K20

    事件高级

    DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div,同时你也单击了div父元素,甚至整个页面。 ​...●事件冒泡: IE最早提出,事件开始由最具体元素接收,然后逐级向上传播到到DOM最顶层节点过程。...事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。 注意 1. Js代码只能执行捕获或者泡其中一个阶段。 2. onclickattachEvent 只能得到冒泡阶段。...事件对象使用 事件触发发生就会产生事件对象,并且系统会以实参形式传给事件处理函数。 所以,事件处理函数声明1个形参用来接收事件对象。 ?...常情况下terget this是一致, 但有一种情况不同,那就是事件冒泡(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象

    1.5K41

    JavaScript--DOM总结

    /环形渐变(用在画布内容上) addColorStop() 规定渐变对象颜色停止位置 线条样式 属性 描述 lineCap 设置或返回线条结束端点样式 lineJoin 设置或返回两条线相交...,或重置当前路径 moveTo() 把路径移动到画布指定点,不创建线条 closePath() 创建从当前点回到起始点路径 lineTo() 添加一个新点,然后画布创建从该点到最后指定点线条...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发,"ALT" 是否被按下。 button 返回当事件被触发,哪个鼠标按钮被点击。...clientX 返回当事件被触发鼠标指针水平坐标。 clientY 返回当事件被触发鼠标指针垂直坐标。 ctrlKey 返回当事件被触发,"CTRL" 键是否被按下。...IE 属性 除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性: 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

    6810

    前端成神之路-WebAPIs03

    DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div,同时你也单击了div父元素,甚至整个页面。...事件对象使用 事件触发发生就会产生事件对象,并且系统会以实参形式传给事件处理函数。 所以,事件处理函数声明1个形参用来接收事件对象。 ?...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素事件执行。 生活代理: ? js事件代理: ?...1px 就会触发这个事件 // 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标, // 把这个xy坐标做为图片topleft 值就可以移动图片...1px 就会触发这个事件 // 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标, // 把这个xy坐标做为图片topleft 值就可以移动图片

    2.9K20

    「Web编程API」- 03

    DOM事件流 html标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div,同时你也单击了div父元素,甚至整个页面。...所以,事件处理函数声明1个形参用来接收事件对象。 事件对象兼容性处理 事件对象本身获取存在兼容问题: 标准浏览器是浏览器给方法传递参数,只需要定义形参 e 就可以获取到。... IE6~8 ,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 获取查找。...常情况下terget this是一致,但有一种情况不同,那就是事件冒泡(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行),这时候this指向是父元素,因为它是绑定事件元素对象...1px 就会触发这个事件 // 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标, // 把这个xy坐标做为图片topleft 值就可以移动图片

    1.4K50
    领券