I want to make left click behave as right click using either JS or jQuery

Question

I have been trying to trigger right click even when the users left click.

I have tried trigger, triggerHandler, mousedown but I wasn't able to get it to work.

I'm able to catch the click events themselves but not able to trigger the context menu.

Any ideas?

can you at least include the code you have tried in your post. — Beginner, Nov 07 '16 at 07:27
Have you tried .contextmenu() https://api.jquery.com/contextmenu/ — Zorken17, Nov 07 '16 at 07:27
I want don't get! I tell my children. SO is for help with code you wrote, not code request. Post a code sample of what you have so far. — GillesC, Nov 07 '16 at 07:33

score 0 · Answer 1 · edited May 23 '17 at 12:16

To trigger the mouse right click

function triggerRightClick(){
  var evt = new MouseEvent("mousedown", {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: 20,
        button: 2
    });
  some_div.dispatchEvent(evt);
}

To trigger the context menu

function triggerContextMenu(){
  var evt = new MouseEvent("contextmenu", {
        view: window
    });
  some_div.dispatchEvent(evt);
}

Here is the bin: http://jsbin.com/rimejisaxi

For better reference/explanation: https://stackoverflow.com/a/7914742/1957036

score -1 · Answer 2 · answered Nov 07 '16 at 07:35

Use the following code for reversing mouse clicks.

$.extend($.ui.draggable.prototype, {
        _mouseInit: function () {
            var that = this;
            if (!this.options.mouseButton) {
                this.options.mouseButton = 1;
            }

            $.ui.mouse.prototype._mouseInit.apply(this, arguments);

            if (this.options.mouseButton === 3) {
                this.element.bind("contextmenu." + this.widgetName, function (event) {
                    if (true === $.data(event.target, that.widgetName + ".preventClickEvent")) {
                        $.removeData(event.target, that.widgetName + ".preventClickEvent");
                        event.stopImmediatePropagation();
                        return false;
                    }
                    event.preventDefault();
                    return false;
                });
            }

            this.started = false;
        },
        _mouseDown: function (event) {

            // we may have missed mouseup (out of window)
            (this._mouseStarted && this._mouseUp(event));

            this._mouseDownEvent = event;

            var that = this,
                btnIsLeft = (event.which === this.options.mouseButton),
                // event.target.nodeName works around a bug in IE 8 with
                // disabled inputs (#7620)
                elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
            if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
                return true;
            }

            this.mouseDelayMet = !this.options.delay;
            if (!this.mouseDelayMet) {
                this._mouseDelayTimer = setTimeout(function () {
                    that.mouseDelayMet = true;
                }, this.options.delay);
            }

            if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
                this._mouseStarted = (this._mouseStart(event) !== false);
                if (!this._mouseStarted) {
                    event.preventDefault();
                    return true;
                }
            }

            // Click event may never have fired (Gecko & Opera)
            if (true === $.data(event.target, this.widgetName + ".preventClickEvent")) {
                $.removeData(event.target, this.widgetName + ".preventClickEvent");
            }

            // these delegates are required to keep context
            this._mouseMoveDelegate = function (event) {
                return that._mouseMove(event);
            };
            this._mouseUpDelegate = function (event) {
                return that._mouseUp(event);
            };
            $(document)
                .bind("mousemove." + this.widgetName, this._mouseMoveDelegate)
                .bind("mouseup." + this.widgetName, this._mouseUpDelegate);

            event.preventDefault();

            mouseHandled = true;
            return true;
        }
    });

Now at the function calling event use mouseButton : 3 for right click and 1 for left click

I want to make left click behave as right click using either JS or jQuery

2 Answers2