滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)

//用firefox变量表示火狐代理
var firefox = navigator.userAgent.indexOf(‘Firefox‘) != -1;
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;
    };
}
var con = document.getElementById(‘content‘);//要在content内部滚动,而页面不受影响,所以这里获取要滚动的对象
//如果是ff就绑定DOMMouseScroll事件,其他浏览器就用onmousewheel事件触发
firefox ? con.addEventListener(‘DOMMouseScroll‘,MouseWheel,false) : (con.onmousewheel = MouseWheel);

时间: 2024-10-27 14:11:41

滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)的相关文章

vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐 默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐 键盘: @keydown $event ev.keyCode @

锋利的jQuery-4--阻止事件冒泡和阻止默认行为

阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", function(event){ //代码 event.stopPropagation(); //通过bind创建的事件对象event来执行 } ); 阻止默认行为: 网页中的默认行为,例如链接跳转和form提交,可以通过preventDefault()方法来阻止. $("#submit").bind

阻止事件冒泡,阻止默认事件

阻止事件冒泡 html代码: <table>  <tr>    <td><span>冒泡事件测试</span></td>  </tr></table> js代码: $('table').click(function(){    alert('table');});$('td').click(function(){    alert('td');});$('span').click(function(e){   

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念--事件和事件流 事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等 事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始 一级级向上冒泡,到document为止--从里到外 IE 5:div--body--document; I

事件冒泡与默认行为

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

阻止冒泡与阻止默认行为

<div id="aaa" style="width:500px;height:300px;background: red;text-align: center;">     <div id="bbb" style="width:300px;height:200px;background: pink;">         <div id="ccc" style="wi

js的冒泡和阻止默认行为

stopPropagation 停止冒泡 preventDefault  阻止默认行为 return false 停止冒泡和阻止默认行为. 冒泡的执行顺序是由触发事件的元素往父级元素层层执行. 但是如果当前元素没有阻止默认行为,而父级元素阻止默认行为,那么默认行为也不会触发. 示例代码 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div

你根本不懂Javascript(5): HTML事件捕获与冒泡

本文最初发布于http://szhshp.org转载请注明 事件捕捉与冒泡 先捕获的必然是父节点, 然后一层层向下捕获, 然后一层层向上冒泡 这里是一个td被点击的效果图 通过三个阶段: 捕捉阶段: 从父节点, 逐渐向目标节点冒泡, 即自上向下 接近目标elem阶段(这一阶段会同时激活第一阶段和第三阶段的handler) 冒泡阶段: 从子节点向父节点冒泡 事件绑定机制 onXXX(event) addEventListener(event, handler) jQuery的elem.on(eve

HTML中鼠标滚轮事件onmousewheel处理

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍. Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel.滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta.不知道为何在该问题上其他厂商和微软的如此一致.Firefox可