jquery 1.9.1 和 macbook air 上的 safari，.on() 事件处理程序不起作用

Question

我正在使用以下代码：

$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });

我也试过了：

$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function( e ){ e.preventDefault(); e.stopPropagation(); });

但事件处理程序永远不会在带有 safari 的 macbook air 上触发。我不知道我做错了什么。如果我将 html 正文设置为溢出：隐藏，正文不会滚动，但是我不希望花哨的框在删除/添加垂直滚动条时移动正文的内容。谢谢。

编辑 在文档中的 jquery 中它说： 如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时都会调用处理程序，无论是直接发生在元素上还是来自后代（内部）元素的冒泡。

那么为什么这不能阻止冒泡事件将花式框一直滚动到正文？ (使用：$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function(e){ e.preventDefault(); e.stopPropagation(); }); )

另一个奇怪的事情是，当滚动覆盖时，当调试器打开时，它会在事件上中断，但在事件中断后，正文无论如何都会立即滚动。可能是一个错误。

编辑 做了一个 jsfiddle @http://jsfiddle.net/Sa7AP/ 如果你在 chrome 和 safari 中滚动，在粉色框内，一旦你到达粉色框的末端并继续滚动，背景也会滚动。我试图在幻想框内滚动时阻止背景滚动。

Answer 1

已编辑（javascript 逻辑已更改 - 工作）

好的，我发现了另一个 SO 问题，并使用了他们稍微修改过的版本：jsfiddle:http://jsfiddle.net/Sa7AP/20/

html:

<div class="container">
    <div class="fancybox-wrap">
       inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text 
    </div>
    random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random text
</div>

javascript：

function isBeyond( element, event )
{
    var el = $( element );
    var scrollTopHeight= el[0].scrollHeight - el[0].clientHeight;
    var delta= event.originalEvent.wheelDelta || -event.originalEvent.detail;
    if ( ( el.scrollTop() <= 0 &&  delta > 0 ) || ( el.scrollTop() >= scrollTopHeight && delta < 0 ) ) {
      return true;
    }
    return false;
}

jQuery('.fancybox-wrap').on('DOMMouseScroll mousewheel touchmove', function(e) { if( isBeyond( this, e) )
{
     e.preventDefault();
} });

Answer 2

试试这个

$jq191('body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });

或

$jq191('html body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });