Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

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 EventHandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g., a middle mouse button).

This property is implemented as part of a plan to improve compatibility between browsers with regards to button behaviors — event behavior is being updated so that click only fires for primary button clicks (e.g., left mouse button). Developers can then use auxclick to provide explicit behavior for non-primary button clicks. Prior to this, click generally fired for clicks on all input device buttons, and browser behavior was somewhat inconsistent.

Syntax

element.onauxclick = functionRef(e);

The event handler function is a MouseEvent object. Apart from the button(s) the event is fired on, the behavior is exactly the same.

Example

In this example we define two event handler functions — 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.

Notes

The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.

Only one click handler can be assigned to an object at a time with this property. You may prefer to use the EventTarget.addEventListener() method instead, since it is more flexible and part of the DOM Events specification.

Specifications

Specification Status Comment
UI Events
The definition of 'onauxclick' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 55Edge No support NoFirefox Full support 53IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 53Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: mfluehr, fscholz, wbamberg, ericwilligers, chrisdavidmills
Laatst bijgewerkt door: mfluehr,