mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
182 lines
12 KiB
HTML
182 lines
12 KiB
HTML
<article class="" id="post-">
|
|
<header class="entry-header">
|
|
<h1 class="entry-title">.contextmenu()</h1>
|
|
<div class="entry-meta">
|
|
所属分类：<span class="category"><a href="/category/events/">事件</a> > <a href="/category/events/mouse-events/">鼠标事件</a></span>
|
|
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/contextmenu/" target="_blank">.contextmenu()</a></span>
|
|
</div><!-- .entry-meta -->
|
|
</header><!-- .entry-header -->
|
|
<article class="entry method" id="contextmenu1"><h2 class="section-title">
|
|
<span class="name">.contextmenu( handler )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class="entry-wrapper">
|
|
<p class="desc"><strong>Description: </strong>Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.</p>
|
|
<ul class="signatures">
|
|
<li class="signature">
|
|
<h4 class="name">
|
|
<span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a href="#contextmenu-handler" id="contextmenu-handler"><span class="icon-link"></span>.contextmenu( handler )</a>
|
|
</h4>
|
|
<ul><li>
|
|
<div><strong>handler</strong></div>
|
|
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Event">Event</a> eventObject )</div>
|
|
<div>A function to execute each time the event is triggered.</div>
|
|
</li></ul>
|
|
</li>
|
|
<li class="signature">
|
|
<h4 class="name">
|
|
<span class="version-details">version added: <a href="/category/version/1.4.3/">1.4.3</a></span><a href="#contextmenu-eventData-handler" id="contextmenu-eventData-handler"><span class="icon-link"></span>.contextmenu( [eventData ], handler )</a>
|
|
</h4>
|
|
<ul>
|
|
<li>
|
|
<div><strong>eventData</strong></div>
|
|
<div>Type: <a href="http://api.jquery.com/Types/#Anything">Anything</a>
|
|
</div>
|
|
<div>An object containing data that will be passed to the event handler.</div>
|
|
</li>
|
|
<li>
|
|
<div><strong>handler</strong></div>
|
|
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Event">Event</a> eventObject )</div>
|
|
<div>A function to execute each time the event is triggered.</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="signature">
|
|
<h4 class="name">
|
|
<span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a href="#contextmenu" id="contextmenu"><span class="icon-link"></span>.contextmenu()</a>
|
|
</h4>
|
|
<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
|
|
</li>
|
|
</ul>
|
|
<div class="longdesc" id="entry-longdesc">
|
|
<p>This method is a shortcut for <code>.on( "contextmenu", handler )</code> in the first two variations, and <code>.trigger( "contextmenu" )</code> in the third.
|
|
The <code>contextmenu</code> event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the <code>html</code> element. Any HTML element can receive this event.
|
|
For example, consider the HTML:</p>
|
|
<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>
|
|
</td>
|
|
<td class="code">
|
|
<pre><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"target"</span>></span></code></div></div><div class="container"><div class="line"><code> Right-click here</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p>The event handler can be bound to the <code><div></code> as follows:</p>
|
|
<div class="syntaxhighlighter javascript">
|
|
<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> ).contextmenu(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert( <span class="string">"Handler for .contextmenu() called."</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p>Now right-clicking on this element displays the alert:</p>
|
|
<p>
|
|
<samp>Handler for .contextmenu() called.</samp>
|
|
</p>
|
|
<p>To trigger the event manually, call <code>.contextmenu()</code> without an argument:</p>
|
|
<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">"#target"</span> ).contextmenu();</code></div></div></pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<h3>Additional Notes:</h3>
|
|
<div class="longdesc"><ul><li>
|
|
As the <code>.contextmenu()</code> method is just a shorthand for <code>.on( "contextmenu", handler )</code>, detaching is possible using <code>.off( "contextmenu" )</code>.
|
|
</li></ul></div>
|
|
<section class="entry-examples" id="entry-examples"><header><h2>Examples:</h2></header><div class="entry-example" id="example-0">
|
|
<p>To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:</p>
|
|
<div class="syntaxhighlighter javascript">
|
|
<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">"p"</span> ).contextmenu(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert( <span class="string">"Hello World!"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="entry-example" id="example-1">
|
|
<p>Right click to toggle background color.</p>
|
|
<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>
|
|
</td>
|
|
<td class="code">
|
|
<pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>contextmenu demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> blue;</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">.contextmenu</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> yellow;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">color</span>:<span class="value"> black;</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"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-1.10.2.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">span</span>></span>Right click the block<span class="tag"></<span class="title">span</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> div = $( <span class="string">"div:first"</span> );</code></div></div><div class="container"><div class="line"><code>div.contextmenu(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> div.toggleClass( <span class="string">"contextmenu"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></section>
|
|
</div></article>
|
|
</article> |