使用event.target获取元素

Question

我基本上正在尝试从event.target中获取目标元素，如果不相等则进行处理。 我该如何让下面的东西起作用？

$(document).ready(function(){
   $(document).click(function(event) {

       if(event.target!='#contents') {  //If clicked element is not div #contents show alert .. //How can i achieve this ?
         alert("..");
       }

    });
});

- user1184100

Answer 1

使用

   //If clicked element id is not contents 
   if(event.target.id !== 'contents') {  
     alert("..");
   }

编辑 - 如果结构与您的评论相同，则使用以下内容：

  if($(event.target).closest('div#contents').length === 0){
    alert('there is no div with id === "contents" in the ancestors of the clicked li');
   }

编辑2 - 代码解释。如果您有以下标记：

<div id="contents"><ul><li>Item1</li><li>Item2</li></ul></div>

这段代码的含义是

//event.target is a DOM element, so wrap it into a jQuery object
$(event.target)
        .closest('div#contents')//find a div element going up the dom tree. 
                                //This method returns a jQuery collection that it's 
                                //empty if the div is not found
        .length //the collection has a length 
                //property that is equal to the number of found elements

- Nicola Peluchetti

---

+1 @user1184100：event.target 是一个对象，不是一个字符串。它的 id 是一个字符串。 - T.J. Crowder

当我执行console.log（event.target）时，它返回<div>的li ..而不是<div id ="contents">，所以上面的代码将无法正常工作:( 结构类似于此 <div id="contents"><ul><li>Item1</ li> <li> Item2 </ li> </ ul> </ div> - user1184100

@user1184100，我编辑了我的答案，请检查它是否适用于您，并在您的问题中发布您的标记。 - Nicola Peluchetti

@nicola 谢谢，它正常工作 :) .. 请不要介意，我没有理解你的代码，你能解释一下吗 :) - user1184100

@user1184100，我添加了一个解释。 - Nicola Peluchetti

请注意，event.target 直接指向触发事件的 DOM 元素，而你也可以在事件处理程序中使用“this”，它是 jQuery 对同一 DOM 元素的包装器。为了避免跨浏览器问题，这种方法被认为更好。 - Wytze