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

186 lines
12 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">.dblclick()</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/dblclick/" target="_blank">.dblclick()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="dblclick1"><h2 class="section-title">
<span class="name">.dblclick( handler(eventObject) )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>为JavaScript 的 "dblclick" 事件绑定一个处理函数,或者触发元素上的 "dblclick" 事件。</p>
<ul class="signatures">
<li class="signature" id="dblclick-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.dblclick( 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="dblclick-eventData-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.dblclick( [eventData ], handler(eventObject) )</h4>
<ul>
<li>
<div><strong>eventData</strong></div>
<div>类型: <a href="/Types/#Object">Object</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="dblclick">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.dblclick()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数</div></li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>这个函数的前两个用法是 <code>.bind('dblclick', handler)</code> 的快捷方式第3个不带参数的用法是 <code>.trigger('dblclick')</code> 的快捷方式。一个元素被双击时将触发 <code>dblclick</code> 事件。任何HTML元素都可以收到此事件。请看下面的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>
</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">"target"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Double-click here</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p class="image">
<img alt="" src="/resources/0042_05_04.png"/>
</p>
<p>这个事件处理器可以绑定到任何 <code>&lt;div&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">'#target'</span>).dblclick(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">'Handler for .dblclick() called.'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>现在,如果我们双击这个元素,警报显示:</p>
<p>
<span class="output">Handler for .dblclick() called.</span>
</p>
<p>应用不带参数的<code>.dblclick()</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">'#target'</span>).dblclick();</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><code>dblclick</code>事件只有在满足以下条件的情况下才能被触发:</p>
<ul>
<li>鼠标指针在元素里面时点击。</li>
<li>鼠标指针在元素里面时释放。</li>
<li>鼠标指针在元素里面时再次点击,点击间隔时间,是系统而定。</li>
<li>鼠标指针在元素里面时再次释放。</li>
</ul>
<p>在同一元素上同时绑定 <code>click</code><code>dblclick</code> 事件是不可取的。各个浏览器事件触发的顺序是不同的,一些浏览器在<code>dblclick</code>之前接受两个 <code>click</code> 事件 ,而和其它浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度(两次点击之间的最大时间被检测为双击)。
</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">在段落上双击时,显示 "Hello World!" 提示框:</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).dblclick( <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span> alert(<span class="string">"Hello World!"</span>); });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">双击时改变背景色。</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>
</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="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">blue;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">color</span>:<span class="value">white;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">150</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span><span class="class">.dbl</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</span></span><span class="rule"><span class="attribute">color</span>:<span class="value">black;</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> <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span><span class="tag">&lt;<span class="title">span</span>&gt;</span>Double click the block<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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> divdbl = $(<span class="string">"div:first"</span>);</code></div></div><div class="container"><div class="line"><code> divdbl.dblclick(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> divdbl.toggleClass(<span class="string">'dbl'</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></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>