Mixing
Why can't remove the event listener on sibling's?
function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>The parent node ul contains three son nodes li,bind a event listener on the parent node ,let ul delegate all node's event listening.
My expectation:
when you click a1, show1 function will remove event listener on its sibling whose id is a2.
That is to say,you click li whose id is a2 after clicking li whose id is a1 ,ok2 will not show on console.
The real action:
You click li whose id is a2 after clicking li whose id is a1 ,ok2 will show on console.
Why
document.getElementById("a2").removeEventListener("click",delegate);
can't remove the event listener on sibling's?
How to fix it?
javascript html event-listener
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
add a comment |
function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>The parent node ul contains three son nodes li,bind a event listener on the parent node ,let ul delegate all node's event listening.
My expectation:
when you click a1, show1 function will remove event listener on its sibling whose id is a2.
That is to say,you click li whose id is a2 after clicking li whose id is a1 ,ok2 will not show on console.
The real action:
You click li whose id is a2 after clicking li whose id is a1 ,ok2 will show on console.
Why
document.getElementById("a2").removeEventListener("click",delegate);
can't remove the event listener on sibling's?
How to fix it?
javascript html event-listener
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
add a comment |
function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>The parent node ul contains three son nodes li,bind a event listener on the parent node ,let ul delegate all node's event listening.
My expectation:
when you click a1, show1 function will remove event listener on its sibling whose id is a2.
That is to say,you click li whose id is a2 after clicking li whose id is a1 ,ok2 will not show on console.
The real action:
You click li whose id is a2 after clicking li whose id is a1 ,ok2 will show on console.
Why
document.getElementById("a2").removeEventListener("click",delegate);
can't remove the event listener on sibling's?
How to fix it?
javascript html event-listener
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>The parent node ul contains three son nodes li,bind a event listener on the parent node ,let ul delegate all node's event listening.
My expectation:
when you click a1, show1 function will remove event listener on its sibling whose id is a2.
That is to say,you click li whose id is a2 after clicking li whose id is a1 ,ok2 will not show on console.
The real action:
You click li whose id is a2 after clicking li whose id is a1 ,ok2 will show on console.
Why
document.getElementById("a2").removeEventListener("click",delegate);
can't remove the event listener on sibling's?
How to fix it?
function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>function show1() {
console.log("ok1");
document.getElementById("a2").removeEventListener("click", delegate);
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>javascript html event-listener
javascript html event-listener
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
edited Jan 1 at 7:15
it_is_a_literature
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
asked Jan 1 at 7:05
it_is_a_literatureit_is_a_literature
4111962149
4111962149
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.
For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set, and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set:
const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
add a comment |
This is beacus you are adding event listener to ul not li. Add event handler to li as following
function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> answered Jan 1 at 7:17
ElishElish
33318
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%2f53993653%2fwhy-cant-remove-the-event-listener-on-siblings%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.
For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set, and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set:
const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
add a comment |
If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.
For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set, and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set:
const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
add a comment |
If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.
For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set, and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set:
const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.
For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set, and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set:
const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>const elementsToIgnore = new Set();
function show1() {
console.log("ok1");
elementsToIgnore.add(document.getElementById("a2"));
}
function show2() {
console.log("ok2");
}
function show3() {
console.log("ok3");
}
function delegate(event) {
var flag = event.target;
if (elementsToIgnore.has(flag)) return;
switch (flag.id) {
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementById("tl");
ob.addEventListener("click", delegate);<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul>answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
answered Jan 1 at 7:12
CertainPerformanceCertainPerformance
91.2k165179
91.2k165179
add a comment |
add a comment |
This is beacus you are adding event listener to ul not li. Add event handler to li as following
function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> answered Jan 1 at 7:17
ElishElish
33318
add a comment |
This is beacus you are adding event listener to ul not li. Add event handler to li as following
function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> answered Jan 1 at 7:17
ElishElish
33318
add a comment |
This is beacus you are adding event listener to ul not li. Add event handler to li as following
function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> answered Jan 1 at 7:17
ElishElish
33318
This is beacus you are adding event listener to ul not li. Add event handler to li as following
function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> function show1(){
console.log("ok1");
document.getElementById("a2").removeEventListener("click",delegate);
}
function show2(){
console.log("ok2");
}
function show3(){
console.log("ok3");
}
function delegate(event)
{
var flag = event.target;
switch(flag.id){
case "a1":
show1();
break;
case "a2":
show2();
break;
case "a3":
show3();
break;
}
}
ob = document.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}<ul id="tl">
<li id="a1">a1</li>
<li id="a2">a2</li>
<li id="a3">a3</li>
</ul> answered Jan 1 at 7:17
ElishElish
33318
answered Jan 1 at 7:17
ElishElish
33318
answered Jan 1 at 7:17
ElishElish
33318
answered Jan 1 at 7:17
ElishElish
33318
33318
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%2f53993653%2fwhy-cant-remove-the-event-listener-on-siblings%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
