Prevent Click through events javascript

Question

I have the following html in a MVC View

<div class="main-container">
    <link href="/Content/styles.css" rel="stylesheet" />
    <link href="/Content/contextmenu.css" rel="stylesheet" />

    <div class="filemanager">
        <div class="search">
            <input type="search" placeholder="Find a file.." />
        </div>
        <div class="breadcrumbs"></div>
        <ul class="data">

        </ul>
        @*<div class="nothingfound">
                <div class="nofiles"></div>
                <span>No files here.</span>
            </div>*@
    </div>

        <script src="/Scripts/contextmenu.js"></script>
        <script src="/Scripts/script.js"></script>
</div>

Then I have the following javascript code

function FileRightClick(item) {
    // Show contextmenu
    $("#copymenu").finish().toggle(100).css({ top: event.pageY + "px", left: event.pageX + "px" });
    return false;
};


$(".main-container").bind("contextmenu", function (event) {

    // Avoid the real one
    event.preventDefault();
    // Show contextmenu
    $("#pastemenu").finish().toggle(100).

        // In the right position (the mouse)
        css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        });
});

<ul class="data"> gets populated by the files and folders, the <li> for each file contains the following piece of code oncontextmenu="return FileRightClick(this);" However if I right click anywhere on a file both menus will pop up. but if I right click anywhere where there is not a file or folder the #pastmenu is displayed.

How can I prevent both from be called or combine the FileRightClick into the $(".main-container")

ADyson · Accepted Answer · 2017-05-24 09:28:19Z

The first thing to note is ".bind" has been deprecated, and was superseded years ago - you should be using ".on". See http://api.jquery.com/bind/ .

Anyway, if you define your FileRightClick using jQuery delegated events (via "on" :-)) you can then easily use stopPropagation https://api.jquery.com/event.stoppropagation/ to prevent the click on the main container from firing. This works because this command stops the event from bubbling higher up the DOM, so the "maincontext" element will never receive the click event.

For more information on delegated events (removing the need for you to use inline event syntax for your dynamically created events) see http://api.jquery.com/on/ under the section "Direct and delegated events".

$(function() {
  $(".main-container").on("contextmenu", function(event) {

    // Avoid the real one
    event.preventDefault();
    alert("main context menu");
  });

  $(".data").on("contextmenu", "li", function(event) {

    // Avoid the real one
    event.preventDefault();
    event.stopPropagation();
    alert("individual data context menu");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">

  <div class="filemanager">
    <div class="search">
      <input type="search" placeholder="Find a file.." />
    </div>
    <div class="breadcrumbs"></div>
    <ul class="data">
      <li>Data - Right Click Me</li>
      <li>Data - Right Click Me 2</li>
    </ul>
  </div>

</div>

Collectives™ on Stack Overflow

Prevent Click through events javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related