Jquery Dropdown, stop propagation with right click

Asked

Viewed 181 times

1

I am using Jquery Dropdown: https://labs.abeautifulsite.net/jquery-dropdown/

In the project’s Issue, there is a code that prevents the menu from closing by clicking as a left button, I would like it just not to close with the right click. In the example below, when you click inside a link in the dropdown, it remains open, but not with the right click, let’s say, to open the link in a new tab...

the code is the one that’s outside the library.

$("#jq-dropdown-1").on("click",function(event){
    event.stopPropagation();
    $('#jq-dropdown-1').dropdown('show');
});
<link href="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.js"></script>

<a href="#" data-jq-dropdown="#jq-dropdown-1">Dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>

jquery

  • In which browser do you have this problem?

  • @Leandroangelo in firefox quantum 58.0.2

  • @Leandroangelo in Chrome works perfectly, both right and left. In that case I wanted to stop the spread just by right clicking on a link to open in a new tab. I tried with contextmenu, but it doesn’t work in firefox.

  • Firefox doesn’t like you to change your default settings and when you right-click the focus leaves your dropdown and goes to its menu. In these latest versions of the browser I only saw work, with this behavior, the dropdown of bootstrap.

  • Come on John, it was a bit confusing your question, but from what I understand, you want to right-click on a link, redirect to the page?

  • @Jorge the problem was solved below by dvd

Show 1 more comment

1 answer

1


With plugin features you cannot do this. You have to create a Event Handler that captures the right click and deal with the classes.

For this I used the on contextmenu, which will prevent the menu from being closed in the right click:

$("#jq-dropdown-1").on("contextmenu", function(event){
    event.stopPropagation();
    
    var a = $("a[data-jq-dropdown='#jq-dropdown-1']");
    
    if(!$(a).hasClass("jq-dropdown-open")){
      $(this).toggle();
      $(a).toggleClass("jq-dropdown-open");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<script src="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.js"></script>

<a href="#" data-jq-dropdown="#jq-dropdown-1">Dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>

  • brilliant as always. Thank you.

  • I have an interesting question in PHP. https://answall.com/questions/277323/vari%C3%A1vel-por-url-em-todos-links-da-p%C3%A1gina

  • With PHP it is complicated to change page links. It cannot be Javascript?

  • With Javascript it is possible, but it will change all the links on the page. Unless you want to change only a specific collection.

  • yes, can be with javascript, just need the value called variable, ? layout=2 apply to all page links.

  • but I still need the value called to be in php, since I also use it to call some file. php based on the variable placed in the URL, only then need this value to apply to all links within that page, or rather links from posts, pages, categories, at the end, links from the same URL.

  • I posted there, but it will always include ?layout=2 link (with query)... if any link has another parameter before it will not work. Ex.: localhost/wp/about/? otherbreakable? layout=2

  • works well, now this question of other parameters... my goal was to use several parameters. example: localhost/wp/about/? header=2&layout=3&footer=2

  • Yeah... hold on I’ll fix that

Show 4 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.