tests/manual/contextmenu.html

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>contextmenu synthetic event</title>
        <meta name="author" content="Todd Kloots">
        <style type="text/css">

          .contextmenu {
              background: #ccc;
              padding: 0;
              margin: 0;
              list-style-type: none;
          }

          .contextmenu li {
              white-space: nowrap;
          }

        </style>

      	<script type="text/javascript" src="/build/yui/yui.js"></script>
        <script type="text/javascript">

          YUI({
            filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
            allowRollup: false,
            lazyEventFacade: true
          }).use("event-contextmenu", "node-event-delegate", "overlay", function (Y) {


            var btn = Y.one("#btn-1"),
                btn2 = Y.one("#btn-2"),
                contextmenu;

            function onContextmenu(e) {

                if (!contextmenu) {
                  contextmenu = new Y.Overlay({
                      bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>",
                      visible: false,
                      constrain: true
                  });
                  contextmenu.render(Y.one("body"));
                }

                contextmenu.set("xy", [e.pageX, e.pageY]);
                contextmenu.show();
            }


            btn.on("contextmenu", onContextmenu);
            btn2.on("contextmenu", onContextmenu);


            Y.one("doc").delegate("contextmenu", function (e) {
                Y.log("First delegate() listener called");
            }, "a");

            Y.one("doc").delegate("contextmenu", function (e) {
                Y.log("Second delegate() listener called");
            }, "a");

            btn.on("contextmenu", function (e) {
                Y.log("First on() listener called");
            });

            btn.on("contextmenu", function (e) {
                Y.log("Second on() listener called");
            });

            btn.on("contextmenu", function (e) {
                Y.log("Third on() listener called");
            });

          });


        </script>

	</head>
	<body>

	   <a href="#" id="btn-1">Button 1</a>
	   <button type="button" id="btn-2">Click Me</button>

	</body>
</html>