GlobalEventHandlers.onauxclick
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The onauxclick
property of the
GlobalEventHandlers
mixin is an event handler for
processing auxclick
events.
The auxclick
event is raised when a non-primary button has been pressed on
an input device (e.g., a middle mouse button). It fires after the mousedown
and mouseup
events, in that order.
Note: Browser vendors are implementing this property as part of a
plan to improve compatibility with regards to button behaviors. Specifically, event
behavior is being updated so that click
only fires for primary button
clicks (e.g., left mouse button), while auxclick
fires for non-primary
button clicks. Historically, click
has generally fired for the click of
any device input button, although with browser behavior being somewhat
inconsistent.
Syntax
target.onauxclick = functionRef;
Value
functionRef
is a function name or a function
expression. The function receives a MouseEvent
object as its sole
argument. Within the function,
this
will
be the element upon which the event was triggered.
Only one onauxclick
handler can be assigned to an object at a time. You
may prefer to use the EventTarget.addEventListener()
method instead,
since it's more flexible.
Example
In this example we define functions for two event handlers —
onclick
and onauxclick
. The
former changes the color of the button background, while the latter changes the button
foreground (text) color. You can see the two functions in action by trying the demo out
with a multi-button mouse (see it
live on GitHub; also see the
source code).
var button = document.querySelector('button');
var html = document.querySelector('html');
function random(number) {
return Math.floor(Math.random() * number);
}
button.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
button.style.backgroundColor = rndCol;
};
button.onauxclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
button.style.color = rndCol;
}
Note: If you are using a three-button mouse, you'll notice that the
onauxclick
handler is run when either of the non-left mouse buttons are
clicked.
Specifications
Specification |
---|
UI Events # event-type-auxclick |
Browser compatibility
BCD tables only load in the browser
See also
auxclick
event- Related event handlers