I have this function inside my js:
$(window).load(function() {
$( ".jp-playlist, .jp-play").on("click", function(e){
e.preventDefault();
e.stopPropagation();
window.parent.$("iframe[id^='iframe']:not(#iframe_"+playerNumber+")").contents().find(".jp-stop").click();
});
});
There is a problem in Firefox. When I click element with class jp-play or jp-playlist whole view jumping to the last element on the page which is triggered by this function.
Any idea how to fix this?
Related
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 am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
I'm experiencing a strange issue in firefox where the click event is raised on the document node when right-clicking a child node.
This code illustrates the issue: http://jsfiddle.net/RyDZU/5/
Updated version : http://jsfiddle.net/RyDZU/10/
$(document).on("click","span",function(e) {
console.log('span');
console.log(e.isPropagationStopped());
});
$(document).on("click","div",function(e) {
console.log('div');
console.log(e.isPropagationStopped());
e.stopPropagation();
console.log(e.isPropagationStopped());
});
$(document).on("click",function(e) {
console.log('body');
console.log(e.isPropagationStopped());
});
HTML:
<div><span>Test</span></div>
If you right-click the word "test" the word "body" is printed in the console on firefox (21). Not in IE 10 / Chrome.
How can i prevent this event from being raised in Firefox?
This does not work:
$("body").on("click", "span", function(e) {
e.preventDefault();
e.stopPropagation();
});
I'm running into the same issue. I have a fiddle where if you left click in the green square the event is handled by both handler2 (on the div) and handler3 (on document). However if you right click, only handler3 is called, which means there isn't an easy way to stop propagation on right clicks in the div.
jsfiddle
// requisite jsfiddle code snippet
function handler2() {
console.log('in handler2');
}
function handler3() {
console.log('in handler3');
}
$(document).ready(function () {
$('#block2').on('click', handler2);
$(document).on('click', handler3);
});
I also tried playing around with the settings dom.event.contextmenu.enabled and services.sync.prefs.sync.dom.event.contextmenu.enabled, but they had no effect on this behavior.
This can be fixed by using event.which to check which mouse button was pressed (from the event listener attached to the document). See https://stackoverflow.com/a/12430795/1170489.
Make
$(document).on("click",function(e) {
console.log('body');
console.log(e.isPropagationStopped());
});
the first handler in your script. When you do it your way, the document click handler is hiding the span and div handlers.
I write simple overlay for my page, kind of lightbox, but is going to do other stuff, anyway, My bigger problem in this tests... is I want when you click the overlay mask, the overlay close... But if you click in the children div, like the content div inside the overlay the overlay must remain open.. (which is not, that's the problem)
http://jsfiddle.net/7Cr2V/
How can I say in Javascript, if I click a child div of "overlayfull" please do not close or hide the overlayfull ... here is my code.. and above is the js fiddle if you want to check it cause my English is very bad.
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.overlayfull').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
One solution is to add a click handler to the children, in which you stop propagation:
$('div.overlayfull').children().click(function(event){
event.stopPropagation();
});
stop propagation only works for parent elements it doesnt not stop the active element itself. you can encompass the text with a class and return false if clicked on that
<div id='my-video'></div>
<div class="message">CLIC HERE MUST NOT CLOSE THE OVERLAY</div>
</div>
if (event.target.className === 'message')
return false;
http://jsfiddle.net/59trN/
I think this is the simplest way to do it if I understand the question correctly. I just check within your handler to see if the div getting clicked on is the one you don't want to close the modal, and return from the function before the fadeout is triggered:
$('div.overlayfull').click(
function(event) {
if ($(event.target).hasClass('videoquon')){
return;
}
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
Check out the fiddle http://jsfiddle.net/aRDKS/
Either have an event for the divs inside overloay div and stoppropagation on that. Inorder to stop the Propagation of event occurring on the children of a parent which has that particular event's handler, either check for the target from where the event generated in the paent handler or add a handler for the children and apply event.stopPropagation() to avoid the event bubbling up to the parent.
$('div.overlayfull div').click(function (e) {
e.stopPropagation()
});
or check for the target's id from which the event was generated:
function (event) {
if (event.target.id == 'overlayfull') { // Check here if the event originated from the intended div itself
$('div.videoquon').fadeToggle(300);
$(this).fadeToggle(300);
}
});
Fiddle
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.