JavaScript only allow user to click once
1
I need to convert this into vanilla JavaScript, to only allow the user to click once and prevent multiple clicks being recorded in Analytics.
jQuery
$('.test-link').one("click", function() {
$(this).click(function() {
return false;
});
});
<a class="test" data-label="track-this-link">Click</a>
I Can't use jQuery, so any help would be great! thanks.
javascript jquery
edited Nov 23 '18 at 11:32
fiza khan
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
add a comment |
1
I need to convert this into vanilla JavaScript, to only allow the user to click once and prevent multiple clicks being recorded in Analytics.
jQuery
$('.test-link').one("click", function() {
$(this).click(function() {
return false;
});
});
<a class="test" data-label="track-this-link">Click</a>
I Can't use jQuery, so any help would be great! thanks.
javascript jquery
edited Nov 23 '18 at 11:32
fiza khan
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
1
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
multiple, thanks
– John
Nov 23 '18 at 10:41
add a comment |
1
1
1
I need to convert this into vanilla JavaScript, to only allow the user to click once and prevent multiple clicks being recorded in Analytics.
jQuery
$('.test-link').one("click", function() {
$(this).click(function() {
return false;
});
});
<a class="test" data-label="track-this-link">Click</a>
I Can't use jQuery, so any help would be great! thanks.
javascript jquery
edited Nov 23 '18 at 11:32
fiza khan
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
I need to convert this into vanilla JavaScript, to only allow the user to click once and prevent multiple clicks being recorded in Analytics.
jQuery
$('.test-link').one("click", function() {
$(this).click(function() {
return false;
});
});
<a class="test" data-label="track-this-link">Click</a>
I Can't use jQuery, so any help would be great! thanks.
javascript jquery
javascript jquery
edited Nov 23 '18 at 11:32
fiza khan
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
edited Nov 23 '18 at 11:32
fiza khan
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
edited Nov 23 '18 at 11:32
fiza khan
879419
edited Nov 23 '18 at 11:32
fiza khan
879419
edited Nov 23 '18 at 11:32
fiza khan
879419
879419
asked Nov 23 '18 at 10:35
JohnJohn
76272751
asked Nov 23 '18 at 10:35
JohnJohn
76272751
asked Nov 23 '18 at 10:35
JohnJohn
76272751
76272751
1
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
multiple, thanks
– John
Nov 23 '18 at 10:41
add a comment |
1
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
multiple, thanks
– John
Nov 23 '18 at 10:41
1
1
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
multiple, thanks
– John
Nov 23 '18 at 10:41
multiple, thanks
– John
Nov 23 '18 at 10:41
add a comment |
2 Answers
2
active
oldest
votes
8
In modern browsers, addEventListener accepts an options object which can contain a once property - if set to true, the listener will only trigger once, after which it will be removed automatically:
document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>Without once, do it manually with removeEventListener:
const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't supportonce, though. For multiple elements, you'll have to iterate over them withquerySelectorAllinstead ofquerySelector
– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
add a comment |
1
Here is for multiple elements
IE 9+
var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>Allowing different event types
function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445037%2fjavascript-only-allow-user-to-click-once%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
8
In modern browsers, addEventListener accepts an options object which can contain a once property - if set to true, the listener will only trigger once, after which it will be removed automatically:
document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>Without once, do it manually with removeEventListener:
const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't supportonce, though. For multiple elements, you'll have to iterate over them withquerySelectorAllinstead ofquerySelector
– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
add a comment |
8
In modern browsers, addEventListener accepts an options object which can contain a once property - if set to true, the listener will only trigger once, after which it will be removed automatically:
document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>Without once, do it manually with removeEventListener:
const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't supportonce, though. For multiple elements, you'll have to iterate over them withquerySelectorAllinstead ofquerySelector
– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
add a comment |
8
8
8
In modern browsers, addEventListener accepts an options object which can contain a once property - if set to true, the listener will only trigger once, after which it will be removed automatically:
document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>Without once, do it manually with removeEventListener:
const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
In modern browsers, addEventListener accepts an options object which can contain a once property - if set to true, the listener will only trigger once, after which it will be removed automatically:
document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>Without once, do it manually with removeEventListener:
const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>document.querySelector('.test').addEventListener(
'click',
() => {
console.log('listener running');
return false;
},
{ once: true }
);<a class="test" data-label="track-this-link">Click</a>const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>const test = document.querySelector('.test');
function listener() {
console.log('listener running');
test.removeEventListener('click', listener);
return false;
}
test.addEventListener('click', listener);<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
answered Nov 23 '18 at 10:37
CertainPerformanceCertainPerformance
86.4k154673
86.4k154673
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't supportonce, though. For multiple elements, you'll have to iterate over them withquerySelectorAllinstead ofquerySelector
– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
add a comment |
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't supportonce, though. For multiple elements, you'll have to iterate over them withquerySelectorAllinstead ofquerySelector
– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
which version is better with once or remove event listener? Would this work for multiple elements? thanks :-)
– John
Nov 23 '18 at 10:42
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't support
once, though. For multiple elements, you'll have to iterate over them with querySelectorAll instead of querySelector– CertainPerformance
Nov 23 '18 at 10:46
When supporting modern browsers, either works fine, as you can see from the snippets. Old browsers don't support
once, though. For multiple elements, you'll have to iterate over them with querySelectorAll instead of querySelector– CertainPerformance
Nov 23 '18 at 10:46
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
when i say there will be multiple elements, there will be lots of links with the same class that when this class is added they will only be able to click once. Sorry im new to JS, thanks for your patience!
– John
Nov 23 '18 at 10:48
add a comment |
1
Here is for multiple elements
IE 9+
var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>Allowing different event types
function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
add a comment |
1
Here is for multiple elements
IE 9+
var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>Allowing different event types
function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
add a comment |
1
1
1
Here is for multiple elements
IE 9+
var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>Allowing different event types
function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
Here is for multiple elements
IE 9+
var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>Allowing different event types
function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>var testEls = document.querySelectorAll('.test')
function clickHandler() {
console.log('click');
this.removeEventListener('click', clickHandler)
return false;
}
Array.from(testEls).forEach(function(el) {
el.addEventListener('click', clickHandler)
})<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>function oneEvent(selector, type, handler) {
var elms = document.querySelectorAll(selector);
var closure = handler
var tmpFunc = function(handler) {
closure()
this.removeEventListener(type, tmpFunc)
}
for(var i = 0; i < elms.length; i++) {
elms[i].addEventListener(type, tmpFunc)
}
}
function clickFunction() { console.log('click') }
oneEvent('.test', 'click', clickFunction)<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a><br>
<a class="test" data-label="track-this-link">Click</a>answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
edited Nov 23 '18 at 11:28
answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
answered Nov 23 '18 at 10:49
Nedko DimitrovNedko Dimitrov
508615
508615
add a comment |
add a comment |
draft saved
draft discarded
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.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445037%2fjavascript-only-allow-user-to-click-once%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
1
('.test-link') will it be one or multiple elements ?
– Nedko Dimitrov
Nov 23 '18 at 10:37
multiple, thanks
– John
Nov 23 '18 at 10:41