contextmenu.html revision f856a43636b28d436393ba16bcbe9016ebf7a59a
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
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots body {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots/*
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots padding-top: 500px;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots padding-bottom: 200px;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots*/
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots }
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots #menu {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots position: absolute;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots display: none;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots background: #ccc;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots padding: 0;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots margin: 0;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots list-style-type: none;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </style>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <script type="text/javascript" src="/build/yui/yui.js"></script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <script type="text/javascript">
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots YUI({
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots allowRollup: false,
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots lazyEventFacade: true
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots }).use("event-contextmenu", "node-event-delegate", "node-style", "node-screen", function (Y) {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots/*
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots Y.one("doc").delegate("contextmenu", function (e) {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots e.preventDefault();
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots var menu = Y.one("#menu");
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots menu.setStyle("display", "block");
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots menu.setXY([e.pageX, e.pageY]);
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots }, "button");
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots*/
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots function onContextMenu(e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log("event listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log(e.pageX);
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots Y.log(e.pageY);
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots }
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots var btn = Y.one("#btn-1");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", onContextMenu);
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots btn.on("contextmenu", onContextMenu);
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots });
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots </script>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots </head>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <body>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <button id="btn-1">Button 1</button>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <button id="detach-btn">Detach Listeners</button>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <ul id="menu">
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <li>Option 1</li>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots <li>Option 2</li>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <li>Option 3</li>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </ul>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </body>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots</html>