mousewheel

  • 版本网址缩略名: DOM/DOM_event_reference/mousewheel
  • 版本标题: mousewheel
  • 版本 id: 300765
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论

修订内容

{{ Non-standard_header() }}

{{ note("Gecko doesn't have a plan to implement this event due to legacy event type and non-standard.") }}

The DOM mousewheel event is fired asynchronously when mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.

  • Interface :{{ domxref('MouseWheelEvent') }}
  • Synchronicity :asynchronous
  • Bubbles : yes (Though, MSDN documents "No")
  • Target : {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}
  • Cancelable : yes (Though, MSDN documents "No")
  • Default action : Scroll, moving history, or zooming in/out

Specification

The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatNo() }} {{ CompatIE("6.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

wheelDelta value

The wheelDelta attribute value is abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive. Otherwise, negative.  This means that the delta value sign is different from DOM Level 3 Events' {{ domeventxref("wheel") }}.

On either IE or WebKit on Windows: The value is multiplies of 120 when the user is using a wheel with notches and its driver doesn't support high resolution scrolling.  Otherwise, could be smaller than 120.

On Opera on Windows: The value is multiplies of 40 per line.  If the scroll speed is 3 lines per notch (default setting on Windows), this value becomes same as IE and WebKit.

Horizontal wheel operation

Neither IE nor Opera fires this event by horizontal wheel operation.  On the other hand, WebKit fires it for horizontal wheel operation too.

See also

  • {{ domxref("MouseWheelEvent") }}
  • Gecko's legacy mouse wheel events: {{ domeventxref("DOMMouseScroll") }} {{ domeventxref("MozMousePixelScroll") }}
  • Standardized wheel event: {{ domeventxref("wheel") }}

修订版来源

<p>{{ Non-standard_header() }}</p>
<p>{{ note("Gecko doesn't have a plan to implement this event due to legacy event type and non-standard.") }}</p>
<p>The DOM <code>mousewheel</code> event is fired asynchronously when mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.</p>
<ul style="display: table; padding: 0pt; border-left: 2px solid; margin-left: 0.5em;">
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Interface :</dfn>{{ domxref('MouseWheelEvent') }}</li>
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Synchronicity :</dfn>asynchronous</li>
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Bubbles :</dfn> yes (Though, MSDN documents "No")</li>
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li>
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Cancelable :</dfn> yes (Though, MSDN documents "No")</li>
  <li style="display: table-row; padding: 3px; margin: 0pt;"><dfn style="display: table-cell; padding: 0pt 5px; border-bottom: medium none; cursor: inherit;">Default action :</dfn> Scroll, moving history, or zooming in/out</li>
</ul>
<h2 id="Specification">Specification</h2>
<p>The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatIE("6.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="wheelDelta_value">wheelDelta value</h2>
<p>The <code>wheelDelta</code> attribute value is abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive. Otherwise, negative.&nbsp; This means that the delta value sign is different from DOM Level 3 Events' {{ domeventxref("wheel") }}.</p>
<p>On either IE or WebKit on Windows: The value is multiplies of 120 when the user is using a wheel with notches and its driver doesn't support high resolution scrolling.&nbsp; Otherwise, could be smaller than 120.</p>
<p>On Opera on Windows: The value is multiplies of 40 per line.&nbsp; If the scroll speed is 3 lines per notch (default setting on Windows), this value becomes same as IE and WebKit.</p>
<h2 id="Horizontal_wheel_operation">Horizontal wheel operation</h2>
<p>Neither IE nor Opera fires this event by horizontal wheel operation.&nbsp; On the other hand, WebKit fires it for horizontal wheel operation too.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("MouseWheelEvent") }}</li>
  <li>Gecko's legacy mouse wheel events: {{ domeventxref("DOMMouseScroll") }} {{ domeventxref("MozMousePixelScroll") }}</li>
  <li>Standardized wheel event: {{ domeventxref("wheel") }}</li>
</ul>
恢复到这个版本