We Keep Coding

.click() cause scroll to the last triggered element

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?

How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?

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.

Exclude a checkbox from .click() of a div

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/

How can I prevent a nested Bootstrap collapse element from firing .show() on the parent?

Here is a jsfiddle of my setup;
http://jsfiddle.net/7LBr5/1/
You'll notice I have indicator arrows on the parent accordion and a function that toggles them when the accordion shows and hides. The problem is that the inner collapse areas (used to hide product details) trigger the function that toggles the arrows on the parent. It seems that the .show() event must be firing on the parent collapse element when the child is actually the one collapsing.
How can I fix this so that the child collapse doesn't toggle the arrows on the parent?
Here is the code for my function;
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");});

Just stop the event from propagating to the parent on the button click using event.stopPropagation, so that it doesn't trigger the click event on the accordion after executing the click event on the button.
$thisButton.click(function(e) {
e.stopPropagation();
//.. Code follows
Demo
Also by the way you don't need to perform an each on the selector to bind the click event, instead just specify the selector for click event itself
$(".btn-switch").click(function (e) {
e.stopPropagation();
var $thisButton = $(this);
$thisButton.toggleClass("btn-primary btn-danger");
if ($(this).hasClass('btn-danger')) {
$thisButton.html('<i class="icon-remove-circle icon-white"></i> Remove');
$(this).parents('.thumbnail').find('.rental-count').val('1');
$(this).parents('.thumbnail').find('input').change();
} else {
$thisButton.html('<i class="icon-ok-circle icon-white"></i> Add to Quote');
$(this).parents('.thumbnail').find('input').val('');
$(this).parents('.thumbnail').find('input').prop('checked', false);
$(this).parents('.thumbnail').find('input').change();
}
});

Best way is to use
$(".btn-switch").click(function (e) {
//you code
return false;
});

Stop propagation not working, avoid children click trigger other function

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