There is a clickable layer. On click it reveals/hides some extra content. Within this layer there is a link which triggers another page to load in the browser.
When this link is clicked the clickable layer is clicked too because it contains the link. How can I avoid that?
I want the link to work but while the user clicks on it the extra content should not be shown.
I tried with
$('.link').click(function(event){
return false;
});
but this disables both hide/show and the link to work. Any ideas? Here is my fiddle: http://jsfiddle.net/ZkPLD/
Use stopPropagation to avoid events bubbling up:
$('.link').click(function(event){
event.stopPropagation();
});
Related
In my navigation menu, I have a dropdown that I want to use. The actual dropping down is fine, and I've prevented the automatic bubbling by using preventDefault(); but now all the links within the dropdown no longer work.
How do I make it so that the dropdown works, doesn't bubble and all the links within the dropdown work?
Edit: I've also used event.stopPropagation() to no effect either. What's going on here?!
This is my code:
// Toggle dropdowns
$('.menu-item-has-children').click(function(e){
e.preventDefault();
$(this).find('.sub-menu').toggleClass('open');
});
To stop bubbling, use event.stopPropagation().
Only use event.preventDefault() to prevent the default action of the event from happening.
Ah, now I see your problem. The issue is that when clicking a menu item to open a submenu, since the item is an anchor pointing to #, the document will scroll to top.
To avoid that, I suggest getting rid of href="#".
Alternatively, you can use preventDefault only if the clicked element was that element, not a descendant:
$('.menu-item-has-children').on('click', function(e){
if(this == e.target) e.stopPropagation();
// ...
});
Demo
You can check which element was clicked by using e.target, and if the clicked element was a sub menu link, don't preventDefault
If i have multiple links on a website, is there a way that if they are clicked they can be transferred to another website? All the links can be the same, but when either one is clicked they transfer over to the same page.
I'm trying to find an event that cancels the bubble when the event is clicked but can't find one.
Say for example I have
google
when that link is clicked then it will cancel the google.com transfer and open yahoo.ca
Using jQuery you could bind a click handler that prevents the default, and instead redirects the page, like so.
$('a').click(function(ev) {
ev.preventDefault();
window.location = "http://www.example.com"
});
If you mean you can have any href in link and you click any of links in page, then you need preventDefault:
$('a').click(function(e){
e.preventDefault();
window.location = 'http://yahoo.ca';
});
I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}
I have a customized dropdown in html coded in "ul" and "li", I show options when a user clicks on the head of "ul" I would like to hide these elements when the user clicks outside the menu area.
Is something like this possible with javascript/YUI not Jquery?
I'm not a YUI guy, so I suspect this could be written a bit better, but I have tested it and it works.
Hide the dropdown anytime the document is clicked:
Y.one(document).on("click", function(){
Y.one("#menu").hide();
});
Prevent clicks on the ul from propagating to the document:
Y.one("#menu").on("click", function(e){
e.stopPropagation();
});
If the visitor clicks anywhere, the click will bubble up to the document, and hide the menu. If they click on the menu, the event will be prevented from bubbling up to the document, and as such the menu will not be hidden.
Demo: http://jsfiddle.net/nHnZT/
use('event-outside') adds support for "outside" events. See the user guide for details: http://yuilibrary.com/yui/docs/event/outside.html
I have a textbox and a div below it. I want to hide the div when the user clicks outside the textbox or div.
Is there any other way other than document.click to handle that user has clicked outside. Because in some of the controls, event.stoppropagation is given, which on click wont trigger the document click event.
Thanks
// This means if you click anywhere on the document once, it'll hide the div
$(document).one("click", function() {/*Do stuff, hide div*/});
// This overrides the previous line for just the textarea and div, therefore making this block of code only apply to everything but the textarea and div
$('textbox, div').click(function(){return false;});
Since you mentioned you have event.stopPropagation() at different sections of the page on click event so document.click will not work to hide the textbox.
Why don't you use document.mousedown? It will work fine.
$(document).mousedown(function(){
$('textboxSelector').hide();
});
Make sure you stop the mousedown event propagation from textbox and its containing div.
Create an overlay div (see other questions) and then add a click event to the overlay div that hides the div below the text box and destroys the overlay div.
<script type="text/javascript">
hideDiv()
{
document.getElementById("divId").style.display = "none";
}
</script>
<input type="text" onblur='javascript:hideDiv()'>
I think this should work.