如何在jQuery中只选择背景

Question

如何在jQuery中只选择背景

2 javascript jquery

我想在我的项目中添加两个事件.

一个用于文档的"背景": $(document).click(function() {do()});

一个用于文档中的div: $("div").click(function() {do2()});

问题是当我点击一个div,两个函数,do并被do2调用.

因此,do()只有当我点击没有元素时,我怎么能告诉他们？

谢谢你的帮助,

J.

Answer 1

Ala*_*orm 7

您在这里寻找的术语是事件传播或事件冒泡.

"现代"浏览器中的事件处理(大多数库挂钩的模型)通过冒泡文档树来工作.这意味着如果你有像这样的html文档结构

<body>
    <div>
        <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Baz</li>
        </ul>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

并且有人点击Foo,发生以下事件

<li>收到点击事件
<ul>收到点击事件
<div>收到点击事件
<body>收到点击事件

这就是发生在你身上的事.你可以做两件事来防止这种情况发生.

正如许多人所建议的那样,如果事件处理程序返回false,则第一个事件传播将停止在已单击的元素上.(这是jQuery处理它的方式,每个库都有不同的方法)

$(document).ready(function() {  
    //hookup events for entire body of document
    $('body').bind('click', function(e){
        //do clicked body stuff
    });
    //hookup our divs, returning false to prevent bubbling
    $('div').bind('click', function(e){
        //do clicked div stuff
        return false;  //stop event propagation
    });     
});

Run Code Online (Sandbox Code Playgroud)

第二,有些人认为更好,方法是使用事件委托.在Javascript和DOM的上下文中,事件委托是将单个事件处理程序附加到外部元素(在本例中为正文)的位置,然后根据最初单击的元素执行特定操作.

像这样的东西.

$(document).ready(function() {  
        //event delegate
        $('body').bind('click', function(e){
                var originalElement = e.srcElement;
                if(!originalElement){originalElement=e.originalTarget;} 
                if ($(originalElement).is('div')) {
                    console.log("A div!");
                }
                else if ($(originalElement).is('div#inside')) {
                    console.log("A Specific Div!");
                }
                else{
                    console.log("Something else!");
                }                   
        });
});

Run Code Online (Sandbox Code Playgroud)

这个好处是双重的.首先,您可以将所有事件处理代码集中到代码中的单个位置.第二个(在我看来更重要)是附加一个事件处理程序消耗更少的浏览器内存并为您提供更好的性能.

归档时间：	16 年，7 月前
查看次数：	693 次
最近记录：	11 年，11 月前