確定被點擊的目標是否是特定類的元素的事件監聽器

我希望能夠區分用戶是否單擊具有某個類（或該類的子元素，如段落）的元素，或者用戶點擊頁面中的其他地方。我使用jQuery來查看事件目標是否是特定類的元素，但由於某種原因，這不起作用。當元素被點擊時它不會註冊。你能看到問題出在哪裏嗎？（看在瀏覽器中檢查控制檯日誌消息）確定被點擊的目標是否是特定類的元素的事件監聽器

見Fiddle

這裏是小提琴代碼：

HTML：

<div class="redsquare"><p>red square</p></div> 
<div class="redsquare"><p>red square</p></div>

CSS

.redsquare { 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin-bottom: 10px; 
}

Javascript：

$(function() { 

    window.addEventListener('mouseup', function(event) { 

    if (!$(event.target).hasClass('.redsquare') && !$(event.target.parentNode).hasClass('.redsquare')) { 

     console.log('target is outside red square'); 
    } else { 
     console.log('target is red square'); 
    } 

    }); 

});

來源

2017-07-31 Galivan

hasClass不應該下手點。它應該是hasClass（紅色方塊） – error404

http://api.jquery.com/hasClass/ – leaf

jQuery的.hasClass()不要求您在類名前加一個點。給.hasClass('redsquare')一試。你可以閱讀它here。

這是fiddle。

此外，檢查元素是否具有該類並將其他情況保留在else塊中會更直接。

來源

2017-07-31 19:35:39 yusif

-1

你的邏輯錯了。你是說如果當前元素沒有類，父類也沒有類。這從來沒有在你的HTML。

if (!$(event.target).hasClass('.redsquare') && 
!$(event.target.parentNode).hasClass('.redsquare'))

你可以嘗試：

window.addEventListener('mouseup', function(event) { 
    if($(event.target).closest('.redsquare').length>0){ 
    console.log('target is in red square'); 
    }else{ 
    console.log('target is outside red square'); 
    } 
});

來源

2017-07-31 19:40:48 ChrisThompson

你錯了，只要你在紅色方塊之外鼠標移動，條件就是真的。唯一的錯誤是在類名前加點。 – leaf

您可以使用此代碼：

這裏的工作演示：https://output.jsbin.com/xobafah

https://jsbin.com/xobafah/edit?html,css,js

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<div class="redsquare">red square</div> 
<div class="redsquare">red square</div> 
</body> 
</html>

的JavaScript

$(function() { 

    $(document).mouseup(function(e) 
    { 
     var container = $(".redsquare"); 
     // if the target of the click isn't the container nor a descendant of the container 
     if (!container.is(e.target) && container.has(e.target).length === 0) 
     { 
      console.log('target is outside red square'); 
     } 
     else{ 
      console.log('target is red square'); 
     } 
    }); 

});

來源

2017-07-31 19:41:11

使用event.target.className獲取類名。

$(function() { 
 

 
    window.addEventListener('mouseup', function(event) { 
 
    if (event.target.className != 'redsquare') { 
 

 
     console.log('target is outside red square'); 
 
    } else { 
 
     console.log('target is red square'); 
 
    } 
 
    }); 
 

 
});

.redsquare { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="redsquare">red square</div> 
 
<div class="redsquare">red square</div>

來源

2017-07-31 19:49:53

在你的類名中刪除點，並預期它會工作：

$(function() { 

    window.addEventListener('mouseup', function(event) { 

    if (!$(event.target).hasClass('redsquare') && !$(event.target.parentNode).hasClass('redsquare')) { 

     console.log('target is outside red square'); 
    } else { 
     console.log('target is red square'); 
    } 

    }); 

});

https://jsfiddle.net/bzp0ef9k/1/

來源

2017-07-31 19:53:59 kawnah

確定被點擊的目標是否是特定類的元素的事件監聽器

回答

相關問題