uTools-Manuals/docs/jQuery/mouseover.html
2019-04-21 11:50:48 +08:00

182 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.mouseover()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/mouse-events/">鼠标事件</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/mouseover/" target="_blank">.mouseover()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="mouseover1"><h2 class="section-title">
<span class="name">.mouseover( handler(eventObject) )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>为 JavaScript 的 "mouseover" 事件绑定一个处理函数,或者触发元素上的该事件。(注:支持事件冒泡)</p>
<ul class="signatures">
<li class="signature" id="mouseover-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.mouseover( handler(eventObject) )</h4>
<ul><li>
<div><strong>handler(eventObject)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>每次事件触发时会执行的函数。</div>
</li></ul>
</li>
<li class="signature" id="mouseover-eventData-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.mouseover( [eventData ], handler(eventObject) )</h4>
<ul>
<li>
<div><strong>eventData</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个对象,它包含的数据键值对映射将被传递给事件处理程序。</div>
</li>
<li>
<div><strong>handler(eventObject)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>每次事件触发时会执行的函数。</div>
</li>
</ul>
</li>
<li class="signature" id="mouseover">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.mouseover()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>这个方法的前两个用法是 <code>.bind('mouseover', handler)</code> 的快捷方式第3个不带参数的用法是 <code>.trigger('mouseover')</code> 的快捷方式。</p>
<p>当鼠标指针进入元素内时,<code>mouseover</code>事件就会被触发任何HTML元素都可以接受此事件。</p>
<p>举例来说请看下面的HTML</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"outer"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Outer</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"inner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Inner</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"other"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Trigger the handler</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p class="image">
<img alt="" src="/resources/0042_05_06.png"/>
</p>
<p>这个事件可以绑定到任何元素:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#outer'</span>).mouseover(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#log'</span>).append(<span class="string">'&lt;div&gt;Handler for .mouseover() called.&lt;/div&gt;'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>现在当指针进入<span class="output">Outer</span> <code>&lt;div&gt;</code>元素时“Handler for .mousedown() called.”这个字符串将被添加到<code>&lt;div id="log"&gt;</code>。我们也可以通过点击其它元素,手动触发另一个元素上的该事件:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#other'</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#outer'</span>).mouseover();</code></div></div><div class="container"><div class="line"><code> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这些代码执行后,点击<span class="output">Trigger the handler</span> 同样添加这个信息。</p>
<p>由于此事件类型冒泡,可能导致引起的很多头痛的问题。例如,在这个例子中当鼠标指针移出<span class="output">Inner</span>元素,<code>mouseover</code>事件将被发送到<span class="output">Inner</span>元素,然后冒泡到<span class="output">Outer</span>元素 。这可能会不合时宜的触发绑定的<code>mouseover</code>处理函数。这可以用一个替代方法,见讨论<code>. <a href="/mouseleave">mouseenter</a> ()</code></p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">当触发 mouseover 和 mouseenter 事件时,显示鼠标移出对象的次数。当鼠标移入绑定 mouseover 事件元素的子元素时mouseover 事件同样会被触发。但是,只有在绑定 mouseenter 事件的元素上,将鼠标移入时,才会触发该事件。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="class">.out</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">40</span>%;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">120</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span> <span class="number">15</span>px;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="hexcolor">#D6EDFC</span>;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value">left;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="class">.in</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">60</span>%;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">60</span>%;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="hexcolor">#FFCC00</span>;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">10</span>px auto;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">line-height</span>:<span class="value"><span class="number">1</span>em;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"out overout"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">span</span>&gt;</span>move your mouse<span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"in"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"out enterleave"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">span</span>&gt;</span>move your mouse<span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"in"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> i = <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div.overout"</span>).mouseover(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> i += <span class="number">1</span>;</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).find(<span class="string">"span"</span>).text( <span class="string">"mouse over x "</span> + i );</code></div></div><div class="container"><div class="line"><code> }).mouseout(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).find(<span class="string">"span"</span>).text(<span class="string">"mouse out "</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> n = <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div.enterleave"</span>).mouseenter(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> n += <span class="number">1</span>;</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).find(<span class="string">"span"</span>).text( <span class="string">"mouse enter x "</span> + n );</code></div></div><div class="container"><div class="line"><code> }).mouseleave(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).find(<span class="string">"span"</span>).text(<span class="string">"mouse leave"</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>