In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > detail (event)

detail property (event)

Browser support:

9

Returns an integer value that specifies additional information about the event.

The returned value depends on the type of the event.

For mouse click events, the returned value is the number of clicks.
For mouse wheel events (onmousewheel, DOMMouseScroll) the returned value is the distance that the mouse wheel rolled. Negative values mean the mouse wheel rolled up. The returned value is always a multiple of 3.
For the overflow and underflow events the value of the detail property identifies the scrollbars whose visibility has changed. A value of 0 means the vertical scrollbar, a value of 1 means the horizontal scrollbar and a value of 2 means both the horizontal and vertical scrollbars.

The roll amount can be retrieved with the wheelDelta property in Internet Explorer, Opera, Google Chrome and Safari.

The measurement units of the detail and wheelDelta properties are different. See Example 2 below for details.

Note that the number of scrolled pixels can be different for the same roll amount in different browsers.

Syntax:

object.detail;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that specifies the additional information.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the detail property:

<head>
    <script type="text/javascript">
        function GetDetails (event) {
            var text = document.getElementById ("myInput");
            if ('detail' in event) {
                text.value = event.detail;
            } else {
                alert ("Your browser does not support the event.detail property!");
            }
        }
    </script>
</head>
<body>
    Click on the button quickly.
    <button onclick="GetDetails (event)">Get details!</button>
    <input id="myInput" type="text">
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution to get the roll amount:

<head>
    <script type="text/javascript">
        function MouseScroll (event) {
            var rolled = 0;
            if ('wheelDelta' in event) {
                rolled = event.wheelDelta;
            }
            else {  // Firefox
                    // The measurement units of the detail and wheelDelta properties are different.
                rolled = -40 * event.detail;
            }
            
            var info = document.getElementById ("info");
            info.innerHTML = rolled;
        }

        function Init () {
                // for mouse scrolling in Firefox
            var elem = document.getElementById ("myDiv");
            if (elem.addEventListener) {    // all browsers except IE before version 9
                    // Internet Explorer, Opera, Google Chrome and Safari
                elem.addEventListener ("mousewheel", MouseScroll, false);
                    // Firefox
                elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
            }
            else {
                if (elem.attachEvent) { // IE before version 9
                    elem.attachEvent ("onmousewheel", MouseScroll);
                }
            }
        }
    </script>
</head>
<body onload="Init ();">
    Use the mouse wheel on the field below.
    <div id="myDiv" style="width:200px; height:200px; overflow:auto;">
        <div style="height:2000px; background-color:#a08080;"></div>
    </div>
    <br />
    The last roll amount: <span id="info" style="background-color:#e0e0d0;"></span>
</body>