How to make sure clickable objects don't propagate to the wrong element?
Languages involved: HTML, CSS, JS
Context: I'm relatively new to web development. I have two elements overlapping each other. One is a slider, one is a div. The slider is on top of the div.
Code snippets:
<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>
and
initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
I need to make it that when you click the slider, it doesn't click the div. How would I go about doing that? I've tried z-index, but that doesn't seem to change anything.
Thanks in advance!
javascript html listener layer propagation
asked Nov 14 '18 at 17:50
SteichenSteichen
192
add a comment |
Languages involved: HTML, CSS, JS
Context: I'm relatively new to web development. I have two elements overlapping each other. One is a slider, one is a div. The slider is on top of the div.
Code snippets:
<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>
and
initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
I need to make it that when you click the slider, it doesn't click the div. How would I go about doing that? I've tried z-index, but that doesn't seem to change anything.
Thanks in advance!
javascript html listener layer propagation
asked Nov 14 '18 at 17:50
SteichenSteichen
192
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52
add a comment |
Languages involved: HTML, CSS, JS
Context: I'm relatively new to web development. I have two elements overlapping each other. One is a slider, one is a div. The slider is on top of the div.
Code snippets:
<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>
and
initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
I need to make it that when you click the slider, it doesn't click the div. How would I go about doing that? I've tried z-index, but that doesn't seem to change anything.
Thanks in advance!
javascript html listener layer propagation
asked Nov 14 '18 at 17:50
SteichenSteichen
192
Languages involved: HTML, CSS, JS
Context: I'm relatively new to web development. I have two elements overlapping each other. One is a slider, one is a div. The slider is on top of the div.
Code snippets:
<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>
and
initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
I need to make it that when you click the slider, it doesn't click the div. How would I go about doing that? I've tried z-index, but that doesn't seem to change anything.
Thanks in advance!
javascript html listener layer propagation
javascript html listener layer propagation
asked Nov 14 '18 at 17:50
SteichenSteichen
192
asked Nov 14 '18 at 17:50
SteichenSteichen
192
edited Nov 14 '18 at 17:52
Steichen
asked Nov 14 '18 at 17:50
SteichenSteichen
192
asked Nov 14 '18 at 17:50
SteichenSteichen
192
asked Nov 14 '18 at 17:50
SteichenSteichen
192
192
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52
add a comment |
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52
add a comment |
3 Answers
3
active
oldest
votes
As I'm sure you've figured out by now, events in JavaScript by default bubble up from a child to a parent. You need to stop that from happening at the child level, also known as preventing propagation.
Using the stopPropagation function, you can handle this as follows:
function sliderFunction(e) {
e.stopPropagation();
}
Simple. That event will no longer reach the parent.
EDIT
While stop propagation is the correct method to use, event listeners must also match in type. Therefore, both the slider and the parent DIV must have click event listeners (instead of input and click). stopPropagation stops propagation of a specific type of event.
function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>answered Nov 14 '18 at 17:54
ShengSheng
1,013715
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
|
show 4 more comments
You can also check the target once you fire that click event. I've used this approach before:
JSFiddle: http://jsfiddle.net/L4ck7ygo/1/
function divFunction(e) {
if (e.target !== this) {
return;
} else {
console.log('hit');
}
}
When the fiddle first loads, click the slider and you'll see the console log out some text. To see it work, remove the line that is being pointed to and rerun the fiddle. Now when you click the slider, you won't see anything logged in the console, but if you click on the div and not the slider, it will log to the console.
function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
add a comment |
UPDATE: Stupidity on my part. I had the ordering wrong for the elements which caused propagation to not act as intended.
answered Nov 20 '18 at 23:27
SteichenSteichen
192
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306094%2fhow-to-make-sure-clickable-objects-dont-propagate-to-the-wrong-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
As I'm sure you've figured out by now, events in JavaScript by default bubble up from a child to a parent. You need to stop that from happening at the child level, also known as preventing propagation.
Using the stopPropagation function, you can handle this as follows:
function sliderFunction(e) {
e.stopPropagation();
}
Simple. That event will no longer reach the parent.
EDIT
While stop propagation is the correct method to use, event listeners must also match in type. Therefore, both the slider and the parent DIV must have click event listeners (instead of input and click). stopPropagation stops propagation of a specific type of event.
function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>answered Nov 14 '18 at 17:54
ShengSheng
1,013715
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
|
show 4 more comments
As I'm sure you've figured out by now, events in JavaScript by default bubble up from a child to a parent. You need to stop that from happening at the child level, also known as preventing propagation.
Using the stopPropagation function, you can handle this as follows:
function sliderFunction(e) {
e.stopPropagation();
}
Simple. That event will no longer reach the parent.
EDIT
While stop propagation is the correct method to use, event listeners must also match in type. Therefore, both the slider and the parent DIV must have click event listeners (instead of input and click). stopPropagation stops propagation of a specific type of event.
function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>answered Nov 14 '18 at 17:54
ShengSheng
1,013715
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
|
show 4 more comments
As I'm sure you've figured out by now, events in JavaScript by default bubble up from a child to a parent. You need to stop that from happening at the child level, also known as preventing propagation.
Using the stopPropagation function, you can handle this as follows:
function sliderFunction(e) {
e.stopPropagation();
}
Simple. That event will no longer reach the parent.
EDIT
While stop propagation is the correct method to use, event listeners must also match in type. Therefore, both the slider and the parent DIV must have click event listeners (instead of input and click). stopPropagation stops propagation of a specific type of event.
function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>answered Nov 14 '18 at 17:54
ShengSheng
1,013715
As I'm sure you've figured out by now, events in JavaScript by default bubble up from a child to a parent. You need to stop that from happening at the child level, also known as preventing propagation.
Using the stopPropagation function, you can handle this as follows:
function sliderFunction(e) {
e.stopPropagation();
}
Simple. That event will no longer reach the parent.
EDIT
While stop propagation is the correct method to use, event listeners must also match in type. Therefore, both the slider and the parent DIV must have click event listeners (instead of input and click). stopPropagation stops propagation of a specific type of event.
function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>function divFunction() {
console.log('DIV clicked!');
}
function sliderFunction(event) {
event.stopPropagation();
console.log('Slider clicked!');
}
function initListeners() {
document.getElementById('myDiv').addEventListener('click', divFunction);
document.getElementById('mySlider').addEventListener('click', sliderFunction);
}
initListeners();/* unnecessary visual aides */
body *:not(label) {
padding: 2rem;
outline: 1px solid red;
position: relative;
}
label {
display: inline-block;
position: absolute;
background: #222;
color: #fff;
top: 0; left: 0;
}<div id="myDiv">
<label>#myDiv</label>
<div id="tools">
<label>#tools</label>
<input type="range" id="mySlider">
</div>
</div>answered Nov 14 '18 at 17:54
ShengSheng
1,013715
edited Nov 15 '18 at 18:08
answered Nov 14 '18 at 17:54
ShengSheng
1,013715
answered Nov 14 '18 at 17:54
ShengSheng
1,013715
answered Nov 14 '18 at 17:54
ShengSheng
1,013715
1,013715
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
|
show 4 more comments
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
1
1
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
Thanks! I'll try that.
– Steichen
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
@Steichen Whoop! Also, welcome to SO!!
– Sheng
Nov 14 '18 at 17:55
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
Thanks :) Happy to be here!
– Steichen
Nov 14 '18 at 18:09
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
So it reaches and activates the div before the slider... What's the best way to make the slider be the first to react?
– Steichen
Nov 14 '18 at 23:07
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
@Steichen Apologies for the late reply. I'm not quite sure what you're having trouble with, if you're stopping propagation in the slide event listener, it won't reach the parent div unless the parent is directly clicked. If you link a code example I can help further.
– Sheng
Nov 15 '18 at 6:30
|
show 4 more comments
You can also check the target once you fire that click event. I've used this approach before:
JSFiddle: http://jsfiddle.net/L4ck7ygo/1/
function divFunction(e) {
if (e.target !== this) {
return;
} else {
console.log('hit');
}
}
When the fiddle first loads, click the slider and you'll see the console log out some text. To see it work, remove the line that is being pointed to and rerun the fiddle. Now when you click the slider, you won't see anything logged in the console, but if you click on the div and not the slider, it will log to the console.
function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
add a comment |
You can also check the target once you fire that click event. I've used this approach before:
JSFiddle: http://jsfiddle.net/L4ck7ygo/1/
function divFunction(e) {
if (e.target !== this) {
return;
} else {
console.log('hit');
}
}
When the fiddle first loads, click the slider and you'll see the console log out some text. To see it work, remove the line that is being pointed to and rerun the fiddle. Now when you click the slider, you won't see anything logged in the console, but if you click on the div and not the slider, it will log to the console.
function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
add a comment |
You can also check the target once you fire that click event. I've used this approach before:
JSFiddle: http://jsfiddle.net/L4ck7ygo/1/
function divFunction(e) {
if (e.target !== this) {
return;
} else {
console.log('hit');
}
}
When the fiddle first loads, click the slider and you'll see the console log out some text. To see it work, remove the line that is being pointed to and rerun the fiddle. Now when you click the slider, you won't see anything logged in the console, but if you click on the div and not the slider, it will log to the console.
function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
You can also check the target once you fire that click event. I've used this approach before:
JSFiddle: http://jsfiddle.net/L4ck7ygo/1/
function divFunction(e) {
if (e.target !== this) {
return;
} else {
console.log('hit');
}
}
When the fiddle first loads, click the slider and you'll see the console log out some text. To see it work, remove the line that is being pointed to and rerun the fiddle. Now when you click the slider, you won't see anything logged in the console, but if you click on the div and not the slider, it will log to the console.
function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>function initListeners() {
document.getElementById("myDiv").addEventListener("click", divFunction);
document.getElementById("mySlider").addEventListener("input", sliderFunction);
}
initListeners();
function divFunction(e) {
console.log('Firing...') // <-- This will log on any click
if (e.target !== this) {
return;
} else {
console.log('hit'); // <-- This will NOT log except for div click
}
}
function sliderFunction() {
console.log('Doing stuffs...');
}<div id="myDiv">
<input id="mySlider" type="range" min=1 max=100 step=1>
</div>answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
answered Nov 14 '18 at 18:13
justDanjustDan
1,1692720
1,1692720
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
add a comment |
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
The problem I'm having is it registers to the div first and doesn't propagate down to the slider. I need it to check the slider first, then check the div.
– Steichen
Nov 14 '18 at 23:16
add a comment |
UPDATE: Stupidity on my part. I had the ordering wrong for the elements which caused propagation to not act as intended.
answered Nov 20 '18 at 23:27
SteichenSteichen
192
add a comment |
UPDATE: Stupidity on my part. I had the ordering wrong for the elements which caused propagation to not act as intended.
answered Nov 20 '18 at 23:27
SteichenSteichen
192
add a comment |
UPDATE: Stupidity on my part. I had the ordering wrong for the elements which caused propagation to not act as intended.
answered Nov 20 '18 at 23:27
SteichenSteichen
192
UPDATE: Stupidity on my part. I had the ordering wrong for the elements which caused propagation to not act as intended.
answered Nov 20 '18 at 23:27
SteichenSteichen
192
answered Nov 20 '18 at 23:27
SteichenSteichen
192
answered Nov 20 '18 at 23:27
SteichenSteichen
192
answered Nov 20 '18 at 23:27
SteichenSteichen
192
192
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306094%2fhow-to-make-sure-clickable-objects-dont-propagate-to-the-wrong-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
– Chris G
Nov 14 '18 at 17:52