Develop Reference

setExtremes event handler being called an increasing number of times each trigger?

I'm trying to add an event handler to setExtremes for the X Axis. However, this event handler gets called more than once for each zoom action, and whenever the chart is redrawn, the number of times this event will get triggered increases.
When I have something similar to the following:
xAxis: {
...options.xAxis,
events: {
setExtremes: event => console.log('setExtremes'),
afterSetExtremes: event => console.log('afterSetExtremes'),
},
},
My console gets flooded with both calls. If I trigger enough chart updates, the console looks like this (notice each console.log is being run 23 times).
I've looked through the Highcharts documentation, as well as their forum and other Stack Overflow questions trying to find something relating to my problem, but nothing seems relevant to this issue.
What should I do to fix an issue like this?
EDIT:
We are using the map extension to highcharts-react-official
require('highcharts/modules/map')(Highcharts);
This seems to only happen on the mousewheel zoom handler as an on click handler only fires once regardless of how many times the graph has refreshed

Google Chrome: How can I watch the state of the DOM while holding the mouse button

in my DOM i have many SVG rectangles (each one in a separate ), that increase in size as long as the user clicks on (using the d3.js on-drag event). The size increases from 2px to 20px. It works, and all is fine - but:
I have a QUnit test that tests if the size is correct, and it currently runs red, telling me the size remained at 2px.
I tried to check the actual size in the DOM-Inspector, but as soon as I click onto the rectangle to fire the event, its group collapses in the DOM-Inspector and I cant look into. If I release the mouse, the group expands again, but its the original state again, which I dont want to inspect.
I want to look at the state of the DOM at the time when my mouse is clicked.
Is there any way to stop execution immediately?
I already tried using Event-Listener-Breakpoints and the element states :active/:focus etc, but without success.
Thanks in advance!
Kev

Attach one more mousedown event handler to your element. During this event handler you can proceed with your tests. Just make sure this handler is executed after the one that applies the changes to the element.
For QUnit you may use var done = assert.async() to get a function that you will call when your test is complete. At the end of the callback, just call done.
For example (using jQuery):
$('#element')
.on('mousedown', function () { $(this).css({color:'red'}); })
.on('mouseup', function () { $(this).css({color:'blue'}); })
.on('mousedown', function () {
// this is the second callback I am talking about
// make your tests...
console.log($(this).css('color'))
// now it is done, call "done()"
})
The color red will be logged.

Is it possible to intercept/override all click events in the page?

I've written an html5 application which is supposed to work on mobile devices. 90% of the time it works fine however in certain devices (mostly androids 4.0+) the click events fire twice.
I know why that happens, I'm using iScroll 4 to simulate native scrolling and it handles the events that happen inside the scroll.(line 533 dispatches the event if you're interested) Most of the time it works fine but in certain devices both the iScroll dispatched event and the original onClick event attached to the element are fired, so the click happens twice. I can't find a pattern on which devices this happen so I'm looking for alternatives to prevent double clicks.
I already came up with an ugly fix that solves the problem. I've wrapped all the clicks in a "handleClick" method, that is not allowed to run more often than 200ms. That became really tough to maintain. If I have dynamically generated content it becomes a huge mess and it gets worse when I try to pass objects as parameters.
var preventClick = false;
function handleClick(myFunction){
if (preventClick)
return;
setTimeout(function(){preventClick = true;},200);
myFunction.call():
}
function myFunction(){
...
}
<div onclick='handleClick(myfunction)'> click me </div>
I've been trying to find a way to intercept all click events in the whole page, and there somehow work out if the event should be fired or not. Is it possible to do something like that?
Set myFunction on click but before it's called, trigger handleClick()? I'm playing with custom events at the moment, it's looking promising but I'd like to not have to change every event in the whole application.
<div onclick='myfunction()'> click me </div>

You can do that with the following ( i wouldn't recommend it though):
$('body').on('click', function(event){
event.preventDefault();
// your code to handle the clicks
});
This will prevent the default functionality of clicks in your browser, if you want to know the target of the click just use event.target.
Refer to this answer for an idea on how to add a click check before the preventDefault();

I don't like events on attributes, but that's just me.
Thinking jquery: $(selector).click(function(){ <your handler code> } you could do something like:
$(selector).click(function(event){
handleClick(window[$(this).attr("onclick")]);
};
of course, there wouldn't be any parameters...

onmouseover and onmouseout functions containing intervals not executing correctly

I am doing some experimentation with JavaScript and I have a list of 4 items displayed horizontally, with each list item having an onmouseover and onmouseout event assigned.
The onmouseover event for each item executes a function which increases the height of the item over time using an interval.
the outmouseover event for each item executes a function which then reduces the height of the item to its default value over time using another interval.
It is working in the following scenario:
When I trigger the onmouseover for a list item the height increases as expected, and when I take the mouse off the list item the height then decreases as expected.
The problem is however, it doesn't seem to work in the following scenario:
When I trigger the onmouseover for a list item the height increases as expected, however if I trigger another onmouseover event for another list item before the item has returned to its original size, the onmouseout function for the previous list item does not finish executing.
Sorry if I am lacking any detail, evidently I am incredibly bad at explaining things.... So I have a link to the source code and a site where you can test the code to see what is happening.
Maybe I do not have as much of a knowledge of javascript as I thought, so while a solution or fix would be amazing, I am also happy to accept any advice or some kind of explanation as to why this could be happening.
I thought initially that multiple interval timers could not execute simultaneously, until after some research I found they can. So now I am thinking if it is a conflict between the onmouseover and onmouseout events.
Any advice, guidance or a solution would be extremely appreciated!
Source:
https://docs.google.com/open?id=0B6XLOOGyKVdWVkpSUklmMVI5QUk
Testing Site:
http://www.play-hookey.com/htmltest/
(just copy the contents of that google document and paste into the html text area in the site to see what I am talking about)

Your code:
icon.onmouseover = function(){ enlarge(this, icon.ID); };
icon.onmouseout = function(){ reduce(this, icon.ID); };
Correct code:
icon.onmouseover = function(){ enlarge(this, this.ID); };
icon.onmouseout = function(){ reduce(this, this.ID); };
What happened: you bindded an event with a function and passed variables to it. After each for loop, you redefined that function variable (so at the end, your icon.ID=3). That means that all on event called functions where using same icon.ID=3.
I hope that make sense...

Javascript: Is it possible to get hold of the mouse position outside of an event handler?

I want to get hold of the mouse position in a timeout callback.
As far as I can tell, this can't be done directly. One work around might be to set an onmousemove event on document.body and to save this position, fetching later. This would be rather expensive however, and isn't the cleanest of approaches.

I think you'll have to do the same thing as #Oli, but then if you're using jQuery, it would be much more easier.
http://docs.jquery.com/Tutorials:Mouse_Position
<script type="text/javascript">
jQuery(document).ready(function(){
$().mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
</script>

The direct answer is no but as you correctly say, you can attach events to everything and poll accordingly. It would be expensive to do serious programming on every onmousemove instance so you might find it better to create several zones around the page and poll for a onmouseover event.
Another alternative would be to (and I'm not sure if this works at all) set a recurring timeout to:
Add a onmousemove handler to body
Move the entire page (eg change the body's margin-top)
when the onmousemove handler triggers, get the position and remove the handler. You might need a timeout on this event too (for when the mouse is out of the viewport)
Uberhack but it might work.

As you described, the most straightforward way to do it is setting the onmousemove event handler on the body. It's less expensive than you think: very little computation is done to store the coordinates, and the event gets fired 50 to 100 times a second when the mouse moves. And I suspect a typical user won't move their mouse constantly when viewing a web page.
The following script helps with counting event handlers; on my machine, moving the mouse around in Firefox, this added 5% to 10% to my CPU usage.
<script type="text/javascript">
jQuery(document).ready(function(){
var count = 0;
$().mousemove(function(e){ count += 1; });
$().click(function(e){ $('#status').html(count); });
});
</script>