I have a list of divs with onclick actions associated with them. Inside each div there is a normal link. When i click the link, the javascript is executed (which is fast) and THEN the new page associated with the link starts to load (a fraction of a second later).
What can i do to the link to make it not execute the javascript - although it is located inside the div defined in the script? Is there a way of excluding it from the association, or telling it to stop all javascript onclick?
Thanks!
you could stop the event propagation for the link inside your div elements, like so
$('div a').on('click', function(evt) {
evt.stopPropagation()
/* do something */
});
doing so, when you click on a link, the handler associated to the click event for div elements won't be executed.
Try this ,
$("#yourlinkId").click(function(event) {
event.preventDefault();
});
Have the onclick handler of the link return false, e.g. like this:
<a href="http://foo/bar" onclick="return false">
Or, in jQuery notation:
$('div a').on('click', function(e) { return false; });
or you could prevent the default action by
$('div a').on('click', function(event) {
event.preventDefault();
});
i think stop propogation would prevent any further events that are caused by clicking the link where as prevent default will just stop the actual link click?
Related
I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});
Is there a way to stop the page from redirecting on clicking a link? I'm searching for a function like preventDefault().
event.preventDefault() actually is vanilla JavaScript and can achieve what you're looking for.
For example, with the following markup:
Google
We can attach the following JavaScript to prevent the browser from heading to http://www.google.com/ when the <a> element is clicked:
document.getElementById('preventme').addEventListener(
'click', function(e) { e.preventDefault(); }, false
);
jsFiddle Demo
You can add this little function in your click handler:
event.stopPropagation()
Attach an event handler function that will "return false"
In JavaScript (not jQuery), is there a way of preventing a link from triggering an event more than once?
I'm iterating through some anchors and attaching an onclick event to each link, which then reveals some page content relevant to that link from a json file. The only problem is that a double click or repeated clicks outputs the same content again and again.
What's the best approach to prevent this, or should I re-write the script and change the anchors to submit buttons in order to add a disabled state?
Remove the event listener after it is clicked first.
var element = document.getElementById("id_name");
element.addEventListener("click", onClickHandeler, false);
function onClickHandeler(e) {
// Do here what your code have to do
element.removeEventListener("click", onClickHandeler, false);
}
Hope this helps you
I have a div that has an onclick that hides the div.
If I have a link inside the div, the link does not work, because the onclick steals the click.
The desired result: if a click is made anywhere inside the div BUT the link, that the div gets hidden. If a click is made ON the link, then I want the link to open in a _blank window, and the div to remain visible.
Is there a way to deal with this with javascript?
document.getElementById('yourlinksid').onclick = function(e){
// ... pop your window ...
/* the following prevents the event from "bubbling up"
to the div's event handler */
if(!e.stopPropagation) {
e.cancelBubble = true;
return;
}
e.stopPropagation();
};
Verification:
http://jsfiddle.net/kSTNT/4/
DEMO
Inside the click handler for the link, you'll want to call event.stopPropagation, or set e.cancelBubble to true—whichever your browser prefers. This will prevent the event from bubbling to your div.
document.getElementById("thelink").onclick = function (e) {
window.open();
if (e.stopPropogation)
e.stopPropogation();
if (e.cancelBubble != null)
e.cancelBubble = true;
};
If you control the links, the easiest way is to add onclick="event.stopPropagation();" (or whatever the cross-browser version of that is) to each link, which stops the div from seeing the event without preventing the default effect of the link from taking place.
Alternatively, if the links only contain text, then you can check the tag name of the event's target in the div's click event to see whether it is a link, but if you have something more complex then you need to walk the dom tree from the event target to the div to verify that no link exists.
I want to change the standard browser behavior in a web app where a mousedown click would cause the click action to happen before the button is released. I want this for all the hyperlinks in an app.
Is there a simple way to accomplish this in jQuery?
I am not looking for a solution to change every link individually. It should be a global event handler which works in current and future links.
Example:
in Yahoo Mail, as soon as you click on a tab, that tab gets focus. It happens before the button is released.
There's a requirement to mimic this behavior for hyper links
If I'm understanding you correctly and you want to override the default link behavior, something like this should work:
$(function(){
$("a").bind({
click: function(e){
e.preventDefault();
},
mouseenter: function(){
window.location.href = $(this).attr("href");
}
});
});
Here's a jsFiddle: http://jsfiddle.net/H2L4D/1/
You need http://api.jquery.com/mousedown/
$('a').mousedown(function() {
alert('Handler for .mousedown() called.');
});
$('a').unbind('click');
$('a').bind('mousedown', function() {
//alert('mousedown happened');
});
If you'd like it to apply to all hyperlinks over the lifetime of the page, even dynamically-created ones, you'll want something like this:
$('a').live('mousedown', function(evt)
{
// this stops the default behaviour of the event
evt.preventDefault()
// This changes the location of the page to the href value of the element you clicked
window.location.href = $(this).attr("href");
});