We Keep Coding

Click function on div inside div with click function

So I wanted to know how you could stop the outer divs click function, and only have the inner divs click function be triggered. But, I want to stay using the $(document).on('click',selector) method for use in my application. I have see a few answers, but none that work with that method. Maybe An oversight by me?
$(document).ready(function() {
$('.Name').text('A veery long namemmmmmmeehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeee');
$(document).on("click", ".task", function() {
alert("click");
});
$(document).on("click", ".Name", function() {
alert("click");
});
});
.one {
height: 495px;
flex-basis: 50%;
max-width: 50%;
min-width: 35%;
position: relative;
top: 20px;
margin-right: 20px;
margin-left: 10px;
outline: solid red 1px;
}
.two {
height: 210px;
top: 20px;
position: relative;
margin-left: 10px;
margin-right: 10px;
flex-basis: 50%;
max-width: 50%;
min-width: 15%;
outline: solid red 1px;
}
.flex {
height: 100%;
width: 100%;
display: flex;
}
.Box {
cursor: pointer;
width: 85%;
padding-left: 8px;
}
.Name {
margin: 0px;
width: 85%;
max-height: 25px;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.Date {
margin: 0px;
}
.task {
width: 100%;
height: 55px;
cursor: pointer;
background-color: white;
border-top: solid #eaeaea 1px;
border-bottom: solid #eaeaea 1px;
}
.Details {
position: relative;
top: 10%;
display: inline-block;
margin-left: 15px;
width: 85%;
}
.three {
height: 210px;
top: 20px;
position: relative;
margin-left: 10px;
margin-right: 10px;
flex-basis: 50%;
max-width: 50%;
min-width: 35%;
outline: solid red 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
<div class="one">
one
<div class="task task-container" data-type="yes">
<div class="Details">
<div class="Box">
<p class="Name">A very long nameeeeeeeeeeeeeeeeeeeeeeeeeeeeemmmmmmmmmmmmmmmmee</p>
<p class="Date">Due: 4/10/2018</p>
</div>
</div>
</div>
</div>
<div class="two">
two
</div>
<div class="three">
three
<div class="task task-container" data-type="yes">
<div class="Details">
<div class="Box">
<p class="Name"></p>
<p class="Date">Due: 4/10/2018</p>
</div>
</div>
</div>
</div>
</div>
LINK- https://jsfiddle.net/t29ffzan/35/

First you need to capture the event within the function call:
function(event) {}
Next you call a function to stopPropagation within the function, like so:
$(document).on("click", ".Name", function(event) {
event.stopPropagation()
alert("click");
});
docs

In your second event handler, do the following:
$(document).on("click", ".Name", function(e) {
e.stopPropagation();
alert("click");
});
It will prevent the event from bubbling, i.e. being also called on parent tags.
Look here for moar info: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

In the click handler for the inner element, stop the click from propagating outward (bubbling up).
$(document).on("click", ".task", function() {
alert("click");
});
$(document).on("click", ".Name", function(e) {
e.stopPropagation();
alert("click");
});
https://jsfiddle.net/t29ffzan/36/

jQuery animation sticking on quick hover

If you hover over the element slowly, the animation works correctly. The green layer overlaps from the left and then, from the top, the yellow layer overlaps the green layer. This overlapping should undo itself when the mouse leaves the element, starting with undoing the yellow overlap and then the green one.
But if the cursor hovers over it too quickly, the animation gets stuck on the yellow overlap until you re-mousover and then mouseout. I've tried adding .stop(false, true) jQuery method before each of the .animate methods, which is what I read has remedied similar problems but this didn't work. I tried it by chaining it right before the .animate function, I tried just about all variations of this, on all of the functions, and also with .stop(true,true);.
Is there a way I can stop the mouseout portion from firing if the mouseover portion doesn't finish before the cursor leaves the element?
$(document).ready(function() {
$('#con').hover(
function() { // handlerIn
$('#crossX').animate({'width': '115px'}, function() {
$('#crossY').animate({'height': '115px'})
})
},
function() { // handlerOut
$('#crossY').animate({'height': '15px'}, function() {
$('#crossX').animate({'width': '15px'})
})
}
)
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>

With the following solution it is guaranteed that the "mouse leave part" only runs after the "mouse enter part" is fullfilled and (vice versa).
Additionally the script takes care for the case that on quick user action: "enter > leave > enter" the state remains as if the user haven't done the "quick leave". So actually this should do what you want to achieve (I hope so at least).
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function( sMode ){
if ( 'enter' == sMode )
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ( 'in' == sPosition ) {
if ( mouseEnterIsWaiting ) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if ( mouseLeaveIsWaiting ) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});
body {
padding: 5%;
}
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
If you need further explanations feel free to leave a comment

$("#con").mouseenter(function() {
$('body').addClass('Hover');
$('#crossX').stop().animate({'width':'115px'},500, function(){
$('#crossY').stop().animate({'height': '115px'},500);
});
});
$("body").mouseenter(function() {
$('body').addClass('Hover');
$('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
body{
background-color:#dcdcdc;
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
</body>

Disable click propagation for href

This code snippet explains my case:
$("#b").click(function(e) {
e.stopPropagation();
});
$("#b").click(function() {
alert("trigger div");
});
a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="stackoverflow.com" id="a">
<div id="b">Test</div>
</a>
The problem is that I only want to trigger the click function from the div and not the href from the a tag. In a similar question I found event.stopPropagation(), but that does not work in this case.

You need to prevent the default click event action using event.preventDefault() method.
$("#b").click(function(e) {
e.preventDefault();
alert("trigger div");
});
a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="stackoverflow.com" id="a">
<div id="b">Test</div>
</a>

$("#a").click(function (event) {
event.preventDefault();
});
$("#b").click(function (event) {
event.stopPropagation();
alert("trigger div");
});

without javascript:
#a {
display: block;
position: absolute;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
<a href="stackoverflow.com" id="a">
<div onclick="alert('trigger div')">test</div>
</a>

How to catch event on a parent div?

I would like to ask:
How to make the group displays OVER the divs a and b?
I want to catch event mousedown on group even if a user click on a div a or b.
Basically the group should visually cover the two other divs, so when I click inside the are covered by the group, only group div should detect mousedown.
Notes: I cannot change HTML structure.
document.getElementById('group').addEventListener('click', function(event) {
event.stopPropagation();
alert('click on: ' + event.target.id);
});
#group {
position: absolute;
width: 250px;
height: 250px;
background-color: yellow;
z-index: 2;
opacity: 0.5;
}
#a {
position: absolute;
left: 80px;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
}
#b {
position: absolute;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
}
<div id="group">
<div id="a">A</div>
<div id="b">B</div>
</div>

Use opacity 0 for the children.
Use event.currentTarget instead of event.target.
With this config children are actually above groups, but are not visible and events are caught by groups elem, not children.
document.getElementById('group').addEventListener('click', function(event) {
event.stopPropagation();
alert('click on: ' + event.currentTarget.id);
});
#group {
position: relative;
width: 250px;
height: 250px;
background-color: yellow;
z-index: 2;
opacity: 0.5;
}
#a {
position: relative;
left: 80px;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
opacity: 0
}
#b {
position: relative;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
opacity: 0;
}
<div id="group">
<div id="a">A</div>
<div id="b">B</div>
</div>

Allow Scrolling in DIV when hovering a fixed element

I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>

I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>