javascript - 为什么scroll事件阻止不了冒泡？

Question

需求是当鼠标在页面某个有滚动条的元素内部触发scroll事件，阻止body的scroll一同触发。 说白了就是：鼠标在div里滚时，即使div滚到头了，body也不滚动。 我给了div一个scroll事件，里面阻止冒泡。想通过这个思路...

给我你的怀抱 · Answer

jQuery 插件: http://mohammadyounes.github....
性能问题
滚轮滚一格, 只触发一次滚轮事件
scroll 事件是连续触发的, 自从有了平滑滚动 (事实上 IE6 就已经有了平滑滚动) , 每滚动 1 像素, 都会触发 scroll 事件
不建议 overflow:hidden 和 overflow:hidden 之间反复切换, 因为会导致 re-layout, 性能问题

原理:
scroll 事件既不能 stopPropagation 也不能 preventDefault
看上去是阻止了 scroll 事件, 其实是 preventDefault 滚轮/翻页按键事件

另外, mousewheel 是有兼容性问题的, 所以大家都用 jQuery 了

我想大声告诉你 · Answer

忘了在哪看过相关的文章了
Demo拿走

高洛峰 · Answer

教你个偏方，设置个变量 isScrolling = false;

当鼠标 hover 到目标p时，isScrolling = true; 而对于body 当isScrolling = true时，禁止滚动，简单点就是

document.onmousewheel = function(e){
    e = e || event;
    if(isScrolling){
        e.preventDefault();
        return false;
    }
};

而当鼠标移开p时，isScrolling = false.

扔个三星炸死你 · Answer

滚动阻止demo

//阻止事件冒泡
$.stopEvent = function (e) { if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true } };

//阻止浏览器默认行为
$.stopDefault = function (e) { if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false } };

欧阳克 · Answer

好吧，没人继续了。

目前能找到的方法就依然是overflowhidden。

至于为什么scroll不能阻止冒泡，这个我在MDN上找到了答案：上面说，scroll只冒泡到document.defaultView,而且不能cancel掉。

但是mdn上说mousewheel是可以阻止冒泡的，但是我试了没成功，希望会用的同学能写个demo来瞧瞧~

世界只因有你 · Answer

试试mousewheel事件