如何使用event.target獲取外部div目標？

Question

我正在使用javascript（和jQuery）制作Web服務，並且正在嘗試制作自定義菜單。
但是要點是“用戶單擊的小部件的ID”。
我想返回小部件的ID（例如widget1或widget2 ），
即使用戶按下了內部對象（ img ， textarea等）
我嘗試了event.target.id但它返回內部對象的ID，而不是外部div。
我該如何解決這個問題？

JavaScript和HTML：

 $("#wrapper_widgets").bind("contextmenu", function(event) { event.preventDefault(); alert(event.target.id); }); 

 <div id="wrapper_widgets"> <div id="widget1"> <img src="blablabla.png"> <textarea id="widget1_textarea">blablabla</textarea> </div> <div id="widget2" style="border: 1px solid blue; width: 500px; height: 100px;"> <p id="widget2_timedoc">asdasdasd</p> </div> </div> 

Answer 1

問題是event.target將引用事件起源的元素，因此您必須找到最接近的祖先widget元素

一個簡單的解決方案是對所有小部件使用一個類並將其定位

<div id="wrapper_widgets">
    <div id="widget1" class="widget">
        <img src="blablabla.png">
        <textarea id="widget1_textarea">blablabla</textarea>
    </div>
    <div id="widget2" class="widget" style="border: 1px solid blue; width: 500px; height: 100px;">
        <p id="widget2_timedoc">asdasdasd</p>
    </div>
</div>

然后

$("#wrapper_widgets").on("contextmenu", '.widget', function (event) {
    event.preventDefault();
    alert(this.id);
});

要么

$("#wrapper_widgets").bind("contextmenu", function(event) {
    event.preventDefault();
    alert($(event.target).closest('.widget').attr('id'));
 });

Answer 2

您可以將.closest('div')與.prop()來獲取直接祖先ID。

$(event.target).closest('div').prop('id')

注意：僅當包裝器中沒有<div>s進一步嵌套時，此方法才有效。

$("#wrapper_widgets").bind("contextmenu", function (event) {
    event.preventDefault();
    alert($(event.target).closest('div').prop('id'));
});

 $("#wrapper_widgets").bind("contextmenu", function (event) { event.preventDefault(); alert($(event.target).closest('div').prop('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper_widgets"> <div id="widget1"> <img src="blablabla.png"> <textarea id="widget1_textarea">blablabla</textarea> </div> <div id="widget2" style="border: 1px solid blue; width: 500px; height: 100px;"> <p id="widget2_timedoc">asdasdasd</p> </div> </div> 

Answer 3

在事件功能中使用

$(this).parent().prop('id')

獲取clicked元素的直接父代ID。 這將始終返回直接父級，並且不一定返回div，但在您的情況下它將起作用並返回“ widget1”或“ widget2”。