Question

我正在使用javascript（和jQuery）制作网络服务，我正在尝试制作自定义菜单。
但重点是＆＃34; Widget的ID，用户点击了＃34; 我想要返回小部件的ID（例如widget1或widget2），
即使用户按下了内部对象（img，textarea等）我试过了event.target.id，但它返回了内部对象的id，而不是外部div 我怎么能解决这个问题？

JavaScript和HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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'));
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

在事件中使用

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

获取被点击元素的直接父ID。这将始终返回直接父级，而不一定只返回div，但在您的情况下，它将起作用并返回“widget1”或“widget2”。

如何通过event.target获取外部div目标？

3 个答案: