show

  • Revision slug: Mozilla_event_reference/show
  • Revision title: show
  • Revision id: 239600
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

The show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.

General info

Specification
HTML5
Interface
Event
Bubbles
No
Cancelable
No
Target
Element
Default Action
Show a context menu built from the related menu element.

Properties

{{OpenEventProperties()}}
  {{MouseEventProperties()}}
{{CloseEventProperties()}}

Example

<div contextmenu="test"></div>
<menu type="context" id="test">
    <menuitem label="alert" onclick="alert('the alert label has been clicked')" />
</menu>

<script>
  document.getElementById("test").addEventListener("show", function(e){
    alert("the context menu will be displayed");
  }, false);
</script>

Revision Source

<p>The <code>show</code> event is fired when a <a href="/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute.</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110525/interactive-elements.html#context-menus">HTML5</a></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    Event</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Element</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    Show a context menu built from the related menu element.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}<br>
    {{MouseEventProperties()}}<br>
  {{CloseEventProperties()}}</p><h2 id="Example">Example</h2>
<pre class="brush:html;">&lt;div contextmenu="test"&gt;&lt;/div&gt;
&lt;menu type="context" id="test"&gt;
    &lt;menuitem label="alert" onclick="alert('the alert label has been clicked')" /&gt;
&lt;/menu&gt;

&lt;script&gt;
  document.getElementById("test").addEventListener("show", function(e){
    alert("the context menu will be displayed");
  }, false);
&lt;/script&gt;
</pre>
Revert to this revision