I have a div and there is a link inside. When I click on a div, it should open the link (ex: google.com) but when I click the button it should open another link.
<div class="sc-banner">
Button
</div>
$(".sc-banner").click(function (event) {
event.stopPropagation();
window.open ('http://google.com', "_blank");
});
The issue is because the click event from the a is propagating up the DOM and firing the click handler on the div.
You can fix this in a couple of ways. Firstly, check what the event target was in the div handler:
$(".sc-banner").click(function(e) {
e.stopPropagation();
if (e.target.tagName !== 'A')
window.open('http://google.com', "_blank");
});
Alternatively you could add another event handler to the a which calls stopPropagation():
$(".sc-banner").click(function(e) {
e.stopPropagation();
window.open('http://google.com', "_blank");
});
$(".sc-banner a").click(function(e) {
e.stopPropagation();
});
Related
I would like when i click in a div, it's not trigger the action on the parent div.
My example :
When I click on the ".chosen-container" div, I don't want to trigger the "sort" on the parent div
I tried this, but this doesn't work :
$(document).on("click", '.chosen-container', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return false;
});
Thanks a lot
I have a problem with Bootstrap tabs. I want to create a tab-based menu with a submenu. On all tabs there is a mouseenter event attached, so when I enter the tab with the mouse pointer there appear links in submenu. But some of the tabs do not need a submenu, so I need attach to them a click event, that recognizes what tab i clicked and redirects me to a page. I attached the click event with this code:
$('#mainTabPanel a').click(function (e) {
e.preventDefault();
var $destination = $(this);
if ($destination.hash === "#about") {
window.location.replace("http://stackoverflow.com");
}
});
But it's not working. Can you help me?
EDIT
I've made a example in JsFiddle:
https://jsfiddle.net/Romanus91PL/a12m71pf/5/
When I click the "Bing Link" anchors, they redirect me to the bing.com site. I want to apply such an event too to the About tab (when I click it, it should redirect me to the bing site).
If I understand Your problem correctly, what about this
$(function () {
$('#mainTabPanel a').mouseover(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#mainTabPanel a').click(function(e) {
e.preventDefault();
if (this.hash === "#about") {
window.location.replace("https://bing.com");
}
});
});
https://jsfiddle.net/szepiet83/myqo4wx7/
Please try below given code.It may help you..
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log(e.target) // activated tab
})
I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!
you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO
Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.
I'm tryin to make a div 'active' by clicking on it using jquery. But inside the div, there is a checkbox. I want the div to become active whenever i click anywher inside the div except the checkbox. I have done that, but the checkbox is now not responsding to click events (ie it's not getting checked/unchecked when i click on it).
http://jsfiddle.net/U7VmV/3/
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
return false;
});
Use event.stoppropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
}).find('label').click(function (e) {
e.stopPropagation();
});
Fiddle Demo
You have to prevent the propagation of the event, when you return false it prevents the event propagation but it will also prevents the default action of the click event that is checking/unchecking the checkbox.
So instead or returning false call stopPropagation() in the event object
$(document).ready(function(){
$('.c-video').click(function(){
$('.c-video').removeClass('active');
$(this).addClass('active');
});
}).children().find('label').click(function(e){
e.stopPropagation()
});
Demo: Fiddle
Another way to do it is to check clicked event target:
var $cVideo = $('.c-video').on('click', function(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'LABEL') {
$cVideo.removeClass('active');
$(this).addClass('active');
}
});
http://jsfiddle.net/U7VmV/4/
I want to show a paragraph by clicking on the button with the jQuery. But when it is visible, then I want to hide it by clicking anywhere else than the button (ie. anywhere outside the button).
For example, here is my code:
<p style="display: none">Hello world</p>
<button>Say Hello</button>
jQuery:
$("button").click(function () {
$("p").show();
});
here is jsfiddle link:
http://jsfiddle.net/k9mUL/
How can I hide it by clicking outside the button? Thanks
You could bind a click event handler to the document, as well as the one on the button. In that event handler, hide the p element:
$("button").click(function (e) {
$("p").show();
e.stopPropagation();
});
$(document).click(function() {
$("p").hide();
});
You need to stop the propagation of the click event in the button click event, otherwise it will bubble up to the document and the p element will be hidden again straight away.
Here's a working example.
You can take advantage of event bubbling by binding your handler to the click event of the document and using event.target to determine if the user clicked the button or something else in the document:
$(document).click(function(event) {
if ($(event.target).is("button")) {
$("p").show();
} else {
$("p").hide();
}
});
Although doing it manually is great, there is a plugin which allows you to add this functionality of it helps you:
http://benalman.com/projects/jquery-outside-events-plugin/
You can bind an event handler to the click event on the whole document and check if the targeted element is not a button:
$(document).click(function(e){
if(e.target.nodeName.toLowerCase() != 'button')
$('p').hide();
});
Or here's a more "jquery" way :
$(document).click(function(e){
if(!$(e.target).is('button'))
$('p').hide();
});
Live DEMO.
<p style="display: none">Hello world</p>
<button onclick='show(event);'>Say Hello</button>
function show(e){
$("p").show();
e.cancelBubble = true;
document.addEventListener('click',hide,false);
}
function hide(){
$("p").hide();
document.removeEventListener('click',hide,false);
}