阻止网页内部滚动条mousewheel事件冒泡

利用鼠标滚轮对网页内部无素滚动条触发滚动事件,当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。

通过调用以下函数实现:

function preventScroll(id){
    var _this = document.getElementById(id);
    if(navigator.userAgent.indexOf("Firefox")>0){
        _this.addEventListener(‘DOMMouseScroll‘,function(e){
            _this.scrollTop += e.detail > 0 ? 60 : -60;
            e.preventDefault();
        },false);
    }else{
        _this.onmousewheel = function(e){
            e = e || window.event;
            _this.scrollTop += e.wheelDelta > 0 ? -60 : 60;
            return false;
        };
    }
    return this;
}  

参考资料:http://www.cnblogs.com/weekend001/archive/2011/05/11/2043474.html

IE9不支持类似 e.returnValue = false  这种写法,相应的地方改成return false即可。

jquery插件:

$.fn.extend({
    "preventScroll": function () {//阻止滚动
        $(this).each(function () {
            var _this = this;
            if (navigator.userAgent.indexOf(‘Firefox‘) >= 0) {   //firefox
                _this.addEventListener(‘DOMMouseScroll‘, function (e) { e.preventDefault(); }, false);
            } else {
                _this.onmousewheel = function (e) {
                    return false;
                };
            }
        })
    },
    "areaScroll": function () {//区域防止冒泡滚动
        $(this).each(function () {
            var _this = this;
            if (navigator.userAgent.indexOf(‘Firefox‘) >= 0) {   //firefox
                _this.addEventListener(‘DOMMouseScroll‘, function (e) {
                    _this.scrollTop += e.detail > 0 ? 60 : -60;
                    e.preventDefault();
                }, false);
            } else {
                _this.onmousewheel = function (e) {
                    e = e || window.event;
                    _this.scrollTop += e.wheelDelta > 0 ? -60 : 60;
                    return false;
                };
            }
        })
    }
});

原文地址:https://www.cnblogs.com/GoCircle/p/8393913.html

时间: 2024-10-08 18:43:55

阻止网页内部滚动条mousewheel事件冒泡的相关文章

事件流 事件冒泡和事件捕获

事件冒泡和事件捕获 他们是描述事件触发时序问题的术语. DOM标准规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标.即从外部到内部. 冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标.即从内部到外部 事件冒泡 <body> <div class="parent"> <div class="son"> <div class=&qu

JavaScript事件冒泡和事件委托

JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验为他人答疑解惑.我们知道JavaScript可以监控页面上元素的各种事件,常用的事件有很多,例如点击,鼠标移入.移出,元素改变等等.这次主要说一下事件冒泡及其一个比较酷的应用,事件委托.不做特殊说明,以下都在jQuery框架内执行. 事件冒泡 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的

jQuery[补1] - 事件冒泡和阻止冒泡

假设网页上有两个元素,其中一个元素嵌套在另一个元素中,并且都被绑定了 click 事件,同时 body 元素上也绑定了 click 事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="conten

五,事件对象、阻止浏览器默认动作、阻止事件冒泡

在jquery里边: $().bind(‘click’,function(evt){ evt.preventDefault(); evt.stopPropagation(); }); preventDefault()方法是jquery的方法,名字与js底层代码的名字一致而已. 并且其有做浏览器兼容处理(阻止浏览器默认行为) stopPropagation()方法是jquery的方法,名字与js底层代码的名字一致. 其有做浏览器兼容处理(阻止事件冒泡) 解析: $().bind(‘click’,f

事件冒泡。阻止事件冒泡 |阻止元素的默认行为

<.1> 如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出 现冒泡问题. 触发的顺序是从小范围到大范围. 这就是所谓的冒泡现象,一层一层往上. <html> <head> <title></title> <script src="jquery-2.1.3.js"></script> <style type="text/css"> div#a {

js之事件冒泡和事件捕获及其阻止详细介绍

虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在这里分享给大家 一.事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 复制代码代码如下: -----------------------------------| element1                        ||   --------------------

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

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

jQuery 中的事件冒泡和阻止默认行为

1.事件冒泡: 当点击内部 <span> 元素时,会触发自身及外层 <div> 和 <body> 的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(

javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One