jQuery使用on()事件停止身体所有孩子的传播

时间:2012-10-03 17:43:48

标签: jquery parent-child children stoppropagation

我有一个脚本,当我弹出一个弹出框时禁止滚动body元素,但是我不想禁用弹出框的滚动,(或者除了主体之外的任何其他滚动条),我已经通过选择弹出框内的元素建立了我想要的东西,但是我想让它适用于所有东西,而不仅仅是那个元素。

 $('html').on('mousewheel DOMMouseScroll', "body", function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});


$('div').on('mousewheel DOMMouseScroll', ".photos", function(e) {
    e.stopPropagation();

});

所以我想要做的就是第二个脚本,而不是直接选择.photos,只选择<体>

1 个答案:

答案 0 :(得分:3)

尝试使用>子选择器,不要在委托节点集上使用选择器。

$('body > *').on('mousewheel DOMMouseScroll', null, function(e) {
    e.stopPropagation();
});

如果您想要body的任何后代,请删除>规则。

修改
前面的代码使用了一个选择器,它会使委托无效。感谢@RichardNeilIlagan指出这一点。

编辑2:
如果你想滚动弹出框中的内容以外的其他内容,为什么不让你的弹出窗口使用100%W x 100%H叠加,就像jQuery UI对话框在“模态”模式下一样?然后你可以将你的无滚动处理程序附加到全窗口叠加层并在那里stopPropagation,不是吗。除非您要求弹出窗口后面的内容仍然可访问,否则这将有效。