Styjun

Can I cast reaction spells like Shield or Counterspell when I'm in the middle of casting a spell with a long casting time and don't stop casting it?

How risky is real estate?

How to get cool night-vision without lame drawbacks?

Inverse-quotes-quine

Layout of complex table

Intuitively, why does putting capacitors in series decrease the equivalent capacitance?

What are the penalties for overstaying in USA?

Story-based adventure with functions and relationships

Declining an offer to present a poster instead of a paper

Cascading Repair Costs following Blown Head Gasket on a 2004 Subaru Outback

Are Finite Automata Turing Complete?

How important is payoff?

How can I convince my reader that I will not use a certain trope?

Does Marvel have an equivalent of the Green Lantern?

Gare du Nord to Gare de Lyon transfer time for a family

Going to get married soon, should I do it on Dec 31 or Jan 1?

MH370 blackbox - is it still possible to retrieve data from it?

Why aren't (poly-)cotton tents more popular?

Analog is Obtuse!

How to append a matrix element by element?

Do equal angles necessarily mean a polygon is regular?

Is my Rep in Stack-Exchange Form?

Links to webpages in books

Can ADFS connect to other SSO services?

Event listener added on click but runs straight away?

How do I detect a click outside an element?Trigger a button click with JavaScript on the Enter key in a text boxEvent binding on dynamically created elements?How do I prevent a parent's onclick event from firing when a child anchor is clicked?How to get the data-id attribute?jQuery click events firing multiple timesJavaScript click event listener on classHow to access the correct `this` inside a callback?AngularJS ng-click stopPropagationReact js onClick can't pass value to method

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

7

I add an event on click of my button:

this.$refs.btn.addEventListener('click', this.turnOn);

In the turnOn method I add a listener on the document, to run the turnOff method.

turnOn() 
 document.addEventListener('click', this.turnOff);

Then during testing, I click the button and the turnOn method runs, but that initial click also runs the document click listener.

How can I run the turnOn method, add the document listener, but not run the document click listener on the initial button click?

javascript

share|improve this question

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you are adding 2 addEventListener?
  
  – brk
  Mar 25 at 11:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  2 event listeners for 2 different elements.
  
  – panthro
  Mar 25 at 11:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  do you mind explaining what you have and what you want to do
  
  – brk
  Mar 25 at 11:08
  

  
  
  
  

add a comment | 

7

I add an event on click of my button:

this.$refs.btn.addEventListener('click', this.turnOn);

In the turnOn method I add a listener on the document, to run the turnOff method.

turnOn() 
 document.addEventListener('click', this.turnOff);

Then during testing, I click the button and the turnOn method runs, but that initial click also runs the document click listener.

How can I run the turnOn method, add the document listener, but not run the document click listener on the initial button click?

javascript

share|improve this question

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you are adding 2 addEventListener?
  
  – brk
  Mar 25 at 11:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  2 event listeners for 2 different elements.
  
  – panthro
  Mar 25 at 11:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  do you mind explaining what you have and what you want to do
  
  – brk
  Mar 25 at 11:08
  

  
  
  
  

add a comment | 

I add an event on click of my button:

this.$refs.btn.addEventListener('click', this.turnOn);

In the turnOn method I add a listener on the document, to run the turnOff method.

turnOn() 
 document.addEventListener('click', this.turnOff);

Then during testing, I click the button and the turnOn method runs, but that initial click also runs the document click listener.

How can I run the turnOn method, add the document listener, but not run the document click listener on the initial button click?

javascript

share|improve this question

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

this.$refs.btn.addEventListener('click', this.turnOn);

turnOn() 
 document.addEventListener('click', this.turnOff);

share|improve this question

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

share|improve this question

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

asked Mar 25 at 11:02

panthropanthro

7,6093434 gold badges116116 silver badges218218 bronze badges

1 Answer
1

active

oldest

votes

10

This is due to event bubbling.When you click on <button> an eventListener is attached to body and after that due bubbling its called.
You can prevent that using event.stopPropgation(). Below are two snippets to see the difference.

Non-Working

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

Note: The above non-working example also adds multiple click events on each click on Test

Working

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

share|improve this answer

edited Mar 27 at 17:02

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Great answer, with great example. Thanks.
  
  – panthro
  Mar 25 at 11:11
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55336347%2fevent-listener-added-on-click-but-runs-straight-away%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

10

This is due to event bubbling.When you click on <button> an eventListener is attached to body and after that due bubbling its called.
You can prevent that using event.stopPropgation(). Below are two snippets to see the difference.

Non-Working

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

Note: The above non-working example also adds multiple click events on each click on Test

Working

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

share|improve this answer

edited Mar 27 at 17:02

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Great answer, with great example. Thanks.
  
  – panthro
  Mar 25 at 11:11
  

  
  
  
  

add a comment | 

10

This is due to event bubbling.When you click on <button> an eventListener is attached to body and after that due bubbling its called.
You can prevent that using event.stopPropgation(). Below are two snippets to see the difference.

Non-Working

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

Note: The above non-working example also adds multiple click events on each click on Test

Working

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

share|improve this answer

edited Mar 27 at 17:02

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Great answer, with great example. Thanks.
  
  – panthro
  Mar 25 at 11:11
  

  
  
  
  

add a comment | 

This is due to event bubbling.When you click on <button> an eventListener is attached to body and after that due bubbling its called.
You can prevent that using event.stopPropgation(). Below are two snippets to see the difference.

Non-Working

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

Note: The above non-working example also adds multiple click events on each click on Test

Working

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

share|improve this answer

edited Mar 27 at 17:02

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

document.querySelector('button').addEventListener('click',(e)=>
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

document.querySelector('button').addEventListener('click',(e)=>
 e.stopPropagation();
 document.addEventListener('click',()=>console.log("body clicked"));
 console.log("button clicked")
)

<body>
<button>Test</button>
</body>

share|improve this answer

edited Mar 27 at 17:02

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges

answered Mar 25 at 11:08

Maheer AliMaheer Ali

21.8k44 gold badges1919 silver badges3737 bronze badges