contextmenu.html revision 259d076b01f41c9f1846783430d4db658226dab1
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots<!DOCTYPE html>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots<html lang="en">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <head>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <meta charset="utf-8">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <meta http-equiv="X-UA-Compatible" content="IE=edge">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <title>contextmenu synthetic event</title>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <meta name="author" content="Todd Kloots">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <style type="text/css">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots #menu {
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots position: absolute;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots display: none;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots background: #ccc;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots padding: 0;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots margin: 0;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots list-style-type: none;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </style>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <script type="text/javascript" src="/build/yui/yui.js"></script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <script type="text/javascript">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots YUI({
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots allowRollup: false,
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots lazyEventFacade: true
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots }).use("event-contextmenu", "node-event-delegate", "node-style", "node-screen", "node-event-simulate", function (Y) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots var btn = Y.one("#btn-1");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots var btn2 = Y.one("#btn-2");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots function onContextmenu(e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots var menu = Y.one("#menu");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots menu.setStyle("display", "block");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots menu.setXY([e.pageX, e.pageY]);
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", onContextmenu);
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn2.on("contextmenu", onContextmenu);
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.simulate("contextmenu", { keyCode: 93 });
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.one("doc").delegate("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("First delegate() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots }, "a");
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.one("doc").delegate("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("Second delegate() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots }, "a");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("First on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots });
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("Second on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots });
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("Third on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots });
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots });
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </head>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <body>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <a href="#" id="btn-1">Button 1</a>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <button type="button" id="btn-2">Click Me</button>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <ul id="menu">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <li>Option 1</li>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <li>Option 2</li>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <li>Option 3</li>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots </ul>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </body>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots</html>