We Keep Coding

clicklistener: how to get my mouselistener record every click on a given button

I'm currently recording all the mouse clicks on my html file. I have two functions for that. The first one is a general listener and records all the mouse clicks. The second one is for clicks on the html elements like buttons. The code for these two mouse events is below. When I click on a button the second function records this event. However when I click a second time on the same button right afterwards, the first function records it. In that case, I can't see on the log, that the click was on a button. How can I modify my code, so that even several consequent clicks on the button will be recorded by the respective function?
//general mouse click listener
document.addEventListener('click', showClickCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now() +" "+
event.clientX.toString()+"_"+event.clientY.toString());
}
//listener for html elements
document.getElementById("clickOnMe").addEventListener("focus", function(event) {focusFunction(event);});
function focusFunction(event) {
trackedData.push(Date.now()+" " +event.target.id );
}

The problem is that you are using a focus listener. That means that whenever you focus the button it will trigger that listener, so if you have already clicked it once, you will have to focus something else and then focus that button again. To fix the behavior you should just use a click listener instead.
var trackedData = [];
document.addEventListener('click', showMovementCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now() +" + event.clientX.toString() + "_" + event.clientY.toString());
console.log(trackedData);
}
document.getElementById("clickOnMe").addEventListener("click", function(event) {
focusFunction(event);
console.log(trackedData);
});
function focusFunction(event) {
trackedData.push(Date.now() + " " + event.target.id);
}
<button id="clickOnMe">Click on me</button>

Trigger mouse click on a button each 5 seconds

How to trigger a mouse click on the element (slider "next" button) each X seconds?
I have built a website in Adobe Muse, but the slider widget doesn’t have an auto play function, and I’m trying to make the next button click each 5 seconds to simulate autoplay. I’ve found the class for the button
<div class="fp-controlArrow fp-next"></div>
maybe there is even a chance to trigger clicking it somehow? Thanks

I had to specify both classes to trigger the button and use a bit more difficult command. This worked:
var interval = setInterval(function() {
document.querySelector('.fp-controlArrow.fp-next').click();
}, 5000);
Now I have additional question: is it possible to stop clicking after user will click either back or next button with a mouse?
As a half-measure I’ve set it to stop at about a time it returns to the first slide but it would be much better to stop it after user clicks any of the button...
var interval = setInterval(function() {
document.querySelector('.fp-controlArrow.fp-next').click();
}, 7000);
setTimeout(function( ) { clearInterval( interval ); }, 44000);
Thanks

Use setInterval():
setInterval(() => {
element.click()
}, 5000)
where element is a reference to your DOM element.

you can store your interval on a variable and stop it whenever you want
var interval = setInterval(function() {
button.click();
// [button] here is the element you found with the specified class
// if you're using jQuery
// you can get you button and trigger the event
// beware of other buttons using the same class
jQuery(".fp-next").trigger("click");
}, 5000);
//if you want to stop it
clearInterval(interval);

How to avoid (single) mouse click processing on double click in browser JavaScript?

If the user double clicks an HTML button, the single click event listener gets called before the double click event listener.
Is there a way to skip single click processing on double click (without jumping through hoops)?
Keep in mind that I want to be able to react to the single click, if user does not double click!
Take a look at the self-explanatory sample at jsfiddle.net.
myEventButton.addEventListener(
'click',
function(/*e*/)
{
myClickDiv.innerHTML = 'Clicked.'; // Gets here first on double click.
});
myEventButton.addEventListener(
'dblclick',
function(/*e*/)
{
myDblClickDiv.innerHTML = 'Double clicked.'; // Gets here last on double click.
});

Here is a solution
I don't know if there is a proper way of doing it, but this works. The idea is to keep a timer between clicks, and you forbid any clicks faster than that. This means that when double clicking, the first click will be registered, but the second, being too fast, will be ignored.
Of course you could abstract this behind a nice function, but you get the idea.
Your modified code:
// Added variables to store timers
var minTimeBetweenClicks = 1000;
var lastClickTime = Date.now();
myClearButton.addEventListener(
'click',
function()
{
myClickDiv.innerHTML = '';
myDblClickDiv.innerHTML = '';
});
myEventButton.addEventListener(
'click',
function(/*e*/)
{
// Check the timer before doing anything
if (Date.now() - lastClickTime > minTimeBetweenClicks) {
myClickDiv.innerHTML += ' Clicked.';
lastClickTime = Date.now();
}
});
myEventButton.addEventListener(
'dblclick',
function(/*e*/)
{
myDblClickDiv.innerHTML = 'Double clicked.';
});
PS: I also modified your click code to add "clicked" to the button, so you can see that the double click doesn't add it twice.

Code works in Chrome but infinite loop in IE

I am using this code to dynamically change the text of a span element. It works in chrome, only changing the content of the span once, but does an infinite loop in IE (the count keeps updating and the html text keeps changing). Anyone know how I can fix it or why its happening?
bindFlagUpdate();
function bindFlagUpdate(){
$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
var string = $('#like-' + data.contentId).html();
var getNum = string.match(/[0-9]+/g);
var count = getNum[0];
if(data.flagStatus == 'flagged') {
count++;
} else {
count--;
}
$('#like-' + data.contentId).html("1 user likes this");
$(document).unbind();
bindFlagUpdate();
return false;
});
}
Description of the event:
The flagGlobalAfterLinkUpdate event This event is triggered
immediately after a flag link has been updated. (Flag links appear in
two flavors: "Bookmark this!" and "Unbookmark this!", and when we
speak of "update" we mean this change in appearance).
The even is attached to a "flag" button

To answer this we need to know more about the event flagGlobalAfterLinkUpdate and how it is triggered. It sounds like something in the callback function for the event is triggering the event, so once it's triggered once, it triggers itself continuously.

Execute button event handler the entire time mouse button is depressed

I'd like to create a javascript mousedown event handler for a button. While the button is depressed, I need the handler to execute repeatedly until the button is released (mouseup is fired). E.g. holding an Up button should cause a text box value to increment until it is released.
What's the best way to handle this?

You can make use of setInterval: http://jsfiddle.net/5wypC/1/.
var interval = null;
var i = 0;
$('button').mousedown(function() {
clearInterval(interval); // Make sure to clear any intervals
// that are occasionally still running
interval = setInterval(function() {
$('textarea').val(i++);
}, 100);
});
$('button').mouseup(function() {
clearInterval(interval);
});