I'm making web service with javascript (and jQuery), and I'm trying to make custom menu.
But the main point is "Widget's ID which is clicked by user".
I want to return widget's id (like widget1 or widget2),
even if user pressed inner objects (img, textarea, etc.)
I tried event.target.id but it returns inner object's id, not outer div.
How could I solve this problem?

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

I'm making web service with javascript (and jQuery), and I'm trying to make custom menu.
But the main point is "Widget's ID which is clicked by user".
I want to return widget's id (like widget1 or widget2),
even if user pressed inner objects (img, textarea, etc.)
I tried event.target.id but it returns inner object's id, not outer div.
How could I solve this problem?

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

• javascript
• jquery
• html

• add event.stopPropagation(), before event.preventDefault() – Walter Chapilliquen - wZVanG Commented Jun 9, 2015 at 5:08

3 Answers 3

The problem is event.target will refer to the element from which the event was originated from, so you will have to find the closest ancestor widget element

One easy solution is to use a class to all the widgets and target it

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

then

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

or

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

You can use .closest('div') with .prop() to get the immediate ancestor ID.

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

Note : This would work only if there is no further nesting of <div>s inside wrappers.

$("#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./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>

In the event function use

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

to get the immediate parent's id of the clicked element. This will always return the immediate parent and not necessarily only divs but in your case it will work and return 'widget1' or 'widget2'.