I have made a basic mobile navigation dropdown menu that makes use of nested tags to open the second (and third) level of the navigation. However because the elements are nested in anchor tags, they also trigger the default anchor events. Is there any way to prevent the anchors default event when clicking on a child element of said anchor ?
HTML
<ul class="main-menu">
<li>
<a href="some-link.html">Some Link
<span class="target"></span>
</a>
<ul class="submenu">
<li>Some Link</li>
<li>Some Link</li>
<li>Some Link</li>
</ul>
</li>
</ul>
Example Javascript
$('span.target').on('click', function(event) {
$(event.target).parent().preventDefault();
// Do somthing
});
You could stop the propagation of the event, and cancel it's default behavior. See this:
$('span.target').on('click', function(event) {
event.stopPropagation();
event.preventDefault();
// the rest of your code here...
});
As mentioned in the comments, I add those 2 lines as part of my 'automatic' workflow, in case I'm binding to an anchor tag (a) and prevent the default behavior of navigating away from the page (that's preventDefault()), and stopPropagation to avoid the parent elements' bound events from being triggered.
You can try this code. When you click on the child on anchor it prevents default behaviour of the parent anchor element. I use core javascript here:
var menuAnchor = document.querySelectorAll('.main-menu a');
for(var i = 0, len = menuAnchor.length; i < len; i++){
menuAnchor[i].addEventListener('click', function(event){
if(event.target != this) event.preventDefault();
});
}
Related
I have a list item (#planAdminMenuItem) that has an onclick attribute. This list item has an icon inside of it (.spinner) that will collapse #collapseExample. Whenever the .spinner is clicked, I want it to run bootstrap collapse only. I do not want it to run drawPlanAdmin function. I have tried adding event.stopPropagation to my toggleSpinnerLeftMenu function, but whenever I do that, it also stops the bootstrap collapse. The parent click is blocked, but so is bootstrap collapse.
THE PHP & HTML CODE
<ul>
<li id="planAdminMenuItem" onclick="plan.drawPlanAdmin();">
Book Plan
<span class="icn icn-chevron-down spinner" onclick="ui.toggleSpinnerLeftMenu(this,event);" data-toggle="collapse" data-target="#collapseExample" data-aria-expanded="true" aria-controls="collapseExample"></span>
</li>
<!-- the collapsable area -->
<li id="collapseExample" class="collapse in">
<ul>
<li onclick="plan.drawRunListAdmin();">
Run List View
</li>
<li onclick="plan.drawLadderAdmin();">
Ladder View
</li>
</ul>
</li>
</ul>
THE JS CODE
toggleSpinnerLeftMenu:function(el,event){
el = jQuery(el);
if(el.hasClass('icn-chevron-up')){
el.addClass('icn-chevron-down');
el.removeClass('icn-chevron-up');
}else if(el.hasClass('icn-chevron-down')){
el.addClass('icn-chevron-up');
el.removeClass('icn-chevron-down');
}
event.stopPropagation(); //why is this stopping the collapse also?
},
stopPropagation is doing exactly what it is meant to do.
If you want the parent element to be propagated by the click on the inner element then simply don't do event.stopPropagation at all.
Though for some reasons if you need to have that then my suggestion is: call the function like
toggleSpinnerLeftMenu:function(el,event){
el = jQuery(el);
if(el.hasClass('icn-chevron-up')){
el.addClass('icn-chevron-down');
el.removeClass('icn-chevron-up');
}else if(el.hasClass('icn-chevron-down')){
el.addClass('icn-chevron-up');
el.removeClass('icn-chevron-down');
}
plan.drawPlanAdmin(); // Call the function inside of the child element's click handler.
event.stopPropagation(); //why is this stopping the collapse also?
},
Update: Since you described the issue more clearly in the comment, which has a solution completely south of what I've written above, I am updating with the new content that may be able to help.
Instead of attaching two event handlers, one using an inline onClick attribute and another using Bootstrap's data-collapse, use one:
$(".spinner").on("click", function(event) { // tip: Give a better id or class name
$('#collapseExample').collapse({toggle: true});
ui.toggleSpinnerLeftMenu(this, event);
});
This is the general idea of doing this, you may still have to make some adjustments to your method calls to fit it in.
I have small dropdown profile menu with logout button etc. I need to show the menu when I click on the button and hide it when i click anywhere on page or on the button as well.
<div id='menu'>
<ul>
<li class='has-sub'> <a class="testbutton" id="userButton" onclick="dropdown()" href="#">
<span id="buttonText">User name</span> <span id="triangleDown">▾</span>
</a>
<ul id="submenu">
<li class='has-sub'><a href='#'><span>Change password</span></a>
</li>
<li class='has-sub'><a href='logout.php?action=0'><span>Logout</span></a>
</li>
</ul>
</li>
</ul>
</div>
I used JavaScript. At this time menu is displayed on hidded only when I click on profile button. I also know how to start function using something like document.ready.
My not working code:
function dropdown() {
if ($('#submenu').css('visibility') == 'hidden') {
$('#submenu').css('visibility', 'visible');
} else {
$('#submenu').css('visibility', 'hidden');
}
};
$(document).click(function (event) {
if ($('#submenu').css('visibility') == 'visible') {
$('#submenu').css('visibility', 'hidden');
}
});
But when I combine this methods it does not works. So when I clicked on the button to open menu, nothing happened.
Sorry for my English :)
Thanks for help in advance.
This has partly to do with something called event propagation. Put simply, this means that click events will register not only on the clicked element, but also on any parent or ancestor elements of that element.
So if you click a DIV, the event will also be registered on the BODY, because the DIV is inside the BODY. Put abstractly, if a kitchen is the scene of a crime, then the apartment that houses that kitchen is also the scene of a crime. One is inside the other.
This is prevented by preventing propagation - in jQuery, by running the stopPropagation() method of the evt object that is automatically passed to your event handler.
In any case, your situation can be greatly simplified.
var menu = $('#menu'), but = $('#menu_button');
$(document).on('click', '*', function(evt) {
evt.stopPropagation(); //<-- stop the event propagating to ancestral elements
if ($(this).is(but)) //<-- on button click, toggle visibility of menu
menu.toggle();
else if (!$(this).closest(menu).length) //<-- on click outside, hide menu
menu.hide();
});
Assumption: I have assumed that the toggler button is targetable via the selector '#menu_button'. Update this as required. Also, the code should run inside a DOM-ready handler.
The code listens for clicks to any element. If it's registered on the button, the visible state of the menu is toggled. If it's to an element outside of the menu, the menu is hidden. (If, in the latter case, the menu is already hidden, this will have no effect.)
Here's a working JS Fiddle that demonstrates the approach.
Try this:
$(function() {
$('.test-button').click(function(event) {
event.stopPropagation();
$('#submenu').toggle();
});
$('body').click(function() {
var submenu = $('#submenu');
if(submenu.is(":visible")) {
submenu.hide();
}
})
});
Im trying to create a false hover event for my site using jQuery...
I have created the following only all the child elements in my list now return false also as opposed to linking to the correct page...
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("ul.sf-menu li.i").click(function(e) {
e.preventDefault();
});
}
Has anybody an idea on an alternative method that could work?
HTML
<ul class="sf-menu"> <li>Home<li class="i">Weddings
<ul>
<li>Peel Suite</li>
<li>The Hall</li>
<li>The Grounds</li>
<li>Food & Drink</li>
<li>Pricing</li>
</ul>
</li>
well. without HTML its kind of hard to tell. But you are stopping the default behavior of the browser when the user clicks on the li (and therefor also its children, which I suppose is an anchor/link).
you could check if its a link or an anchor on click and handle it differently;
$("ul.sf-menu li.i").click(function(e) {
if (e.target.nodeName!=="A"){
e.preventDefault();
//do your hover code
}
else{
//do nothing, because the user wants the link to load
}
});
change youre selector so it only matches the first level of listpoints, also i dont see a class i so you might need to drop that from the selector aswell.
$("ul.sf-menu > li")
I keep getting puzzled, can't find a contextmenu that will work for me. Maybe someone can help?
Here's to what I need contextMenu to be added to:
<ul id="list_{id}" class="list">
<li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li>
</ul>
This is dynamic list, so it will add many more of them on the page and differ them by giving different ID's. So I need a contextMenu which will be added to every list but for each list an unique contextMenu. Basically different instances of contextMenu in every list, by adding dynamic {id} tag to the ID of contextMenu or something like that.
Thanks
It's kind of hard to tell what you're asking, but if you want to hook into the "context menu" event of a browser, you hook the contextmenu event and then do whatever you're going to do (which could include creating a div, for instance, with options on it — e.g., your own context menu). You can either do that on the lists themselves, individually, via getElementById as you indicated in your question, or you can do it by hooking the event on some container that holds all of the lists, and then figuring out when the event is triggered which list it was triggered on ("event delegation").
See the end of this answer for the event delegation approach. But assuming you have a way of knowing the actual IDs used and you want to hook each list specifically for some reason:
HTML:
<ul id='list_1'>
<li>List 1 item 1</li>
<li>List 1 item 2</li>
</ul>
<ul id='list_2'>
<li>List 2 item 1</li>
<li>List 2 item 2</li>
</ul>
JavaScript:
hookEvent(document.getElementById('list_1'), 'contextmenu', function(event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
}
display("List 1 context menu");
return false;
});
hookEvent(document.getElementById('list_2'), 'contextmenu', function(event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
}
display("List 2 context menu");
return false;
});
function hookEvent(element, event, handler) {
if (element.addEventListener) {
element.addEventListener( event, handler, false);
}
else if (element.attachEvent) {
element.attachEvent('on' + event, handler);
}
else {
element['on' + event] = handler;
}
}
Live example
Note that only some (most) browsers let you cancel the default context menu.
Update: Re your "but what if the ID is bindable?" question below: I'm afraid I don't know what you mean by "bindable" — none of the tags on your question indicates a specific templating technology. You haven't even mentioned whether the templating is happening server-side or client-side, which makes it hard to help. But basically, by the time the JavaScript is running, there will be real IDs on real elements in the document. You'll have to know what those IDs are in order to use getElementById.
Server-side templating:
If those IDs are going to be completely dynamic and the template is being handled on the server, you can include a small bit of script that passes those IDs on to JavaScript. For instance, near the top of your document you might have:
<script type='text/javascript'>
var mySpecialListIDs = [];
</script>
...and then update your template to add a small script tag each time it's expanded:
<ul id="list_{id}" class="list">
<li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li>
</ul>
<script type='text/javascript'>
mySpecialListIDs.push("{id}");
</script>
Then your client-side code can loop through mySpecialLitIDs and use each ID when hooking up the handler.
Client-side templating:
If the templating is being done client-side, this gets a bit simpler: Just set up your mySpecialListIDs list at some convenient place in your client-side script, and the append to it each time you call the templating engine.
Event Delegation: Whether you're doing server- or client-side templating, if you're going to have dynamic lists like this, sometimes event delegation is the best way to handle it. The contextmenu event (like most, but not all, events) bubbles up the DOM. So if you hook it on an ancestor element (something that contains all of your lists, like the document body itself or some such), you can then see which actual list was clicked by examining the event object. Like this:
HTML:
<div id='list_container'>
<ul id='list_1'>
<li>List 1 item 1</li>
<li>List 1 item 2</li>
</ul>
<ul id='list_2'>
<li>List 2 item 1</li>
<li>List 2 item 2</li>
</ul>
</div>
JavaScript (using the hookEvent function from above):
// Hook up the contextmenu event on the container, not
// on each list:
hookEvent(document.getElementById('list_container'),
'contextmenu',
handleListContextMenu);
// Our handler function
function handleListContextMenu(event) {
var target;
// Handle IE-vs-the-world difference
event = event || window.event;
// Find out what the actual target element clicked was
target = event.target || event.srcElement;
// See if it or an ancestor of it is one of our lists
while (target &&
(target.tagName !== "UL" || !target.id || target.id.substring(0, 5) !== "list_")) {
target = target.parentNode;
}
// Did we find a list?
if (target) {
// Yes, handle this.
if (event.preventDefault) {
event.preventDefault();
}
display("List '" + target.id + "' context menu");
return false;
}
}
Live example
I have a hierarchy of tags within my HTML which all contain onclick event handlers. The onclick is pushed onto the event stack from the leaf back through the root of the hierarchy. I only want to respond to the leaf onclick event. Can I flush the event stack rather than using a flag?
For instance:
<ul>
<li onclick="nada('1');">1</li>
<li onclick="nada('2');">2
<ul>
<li onclick="nada('2.1');">2.1</li>
<li onclick="nada('2.2');">2.2</li>
<li onclick="nada('2.3');">2.3</li>
</ul>
</li>
<li onclick="nada('4');">4</li>
<li onclick="nada('5');">5</li>
</ul>
Clicking on 2.2 using this function...
function nada(which)
{
alert(which);
}
...will result in two alerts for '2.2' and '2'.
What could I add to the nada function to eliminate the alert for '2'?
To stop the event bubbling up to parent elements you have to tell the event object about it. In IE, you set event.cancelBubble= true. In other browsers, you call event.stopPropagation().
You probably also want to turn off the default link-following action so that the browser doesn't keep jumping up to the top trying to follow the non-existing anchor links like #1. In IE, you set event.returnValue= false. In other browsers, you call event.preventDefault().
The event object is accessible as window.event on IE. On other browsers, it is passed into the event handler function. A way to pass the event into a function that works on both is:
<li onclick="nada('2.1', event);">2.1</li>
function nada(n, event) {
alert(n);
if ('stopPropagation' in event) {
event.stopPropagation();
event.preventDefault();
} else {
event.cancelBubble= true;
event.returnValue= false;
}
}
However it would probably be better all round to put the onclick event on the a element which it usually belongs. This helps for accessibility, as the a element will be focusable and keyboard-operable. And it means you don't have to worry about parents' click handlers being called.
(You can style the a to look like a plain block, if you want.)
You can then also kick out the redundant onclick links with a bit of unobtrusive scripting:
<ul id="nadalist">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var links= document.getElementById('nadalist').getElementsByTagName('a');
for (var i= links.length; i-->0;) {
links[i].onclick= function() {
alert(this.hash.substring(1));
return false;
}
}
</script>