contextmenu.html revision 68b1d15dad8af70374cec83a13758dce5621de1d
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
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots .contextmenu {
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots background: #ccc;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots padding: 0;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots margin: 0;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots list-style-type: none;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots .contextmenu li {
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots white-space: nowrap;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots </style>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots <script type="text/javascript" src="/build/yui/yui.js"></script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots <script type="text/javascript">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots YUI({
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots allowRollup: false,
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots lazyEventFacade: true
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots }).use("event-contextmenu", "node-event-delegate", "overlay", function (Y) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots var btn = Y.one("#btn-1"),
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots btn2 = Y.one("#btn-2"),
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots contextmenu;
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots function onContextmenu(e) {
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots if (!contextmenu) {
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots contextmenu = new Y.Overlay({
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>",
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots visible: false,
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots constrain: true
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots });
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots contextmenu.render(Y.one("body"));
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots contextmenu.set("xy", [e.pageX, e.pageY]);
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots contextmenu.show();
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots }
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots btn.on("contextmenu", onContextmenu);
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots btn2.on("contextmenu", onContextmenu);
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots Y.one("doc").delegate("contextmenu", function (e) {
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots Y.log("First delegate() listener called");
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots }, "a");
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots Y.one("doc").delegate("contextmenu", function (e) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots Y.log("Second delegate() listener called");
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots }, "a");
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots btn.on("contextmenu", function (e) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots Y.log("First on() listener called");
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots });
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots btn.on("contextmenu", function (e) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots Y.log("Second on() listener called");
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots });
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots btn.on("contextmenu", function (e) {
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots Y.log("Third on() listener called");
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots });
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots });
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots </script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
</head>
<body>
<a href="#" id="btn-1">Button 1</a>
<button type="button" id="btn-2">Click Me</button>
</body>
</html>