如何使用Jquery/Javascript检测鼠标右键单击和删除操作

Question

我想要追踪在HTML文本框中发生的鼠标右键点击和删除事件。我已经成功将鼠标右键点击+粘贴/剪切/复制映射为以下内容：

          $("#evalname").bind('paste/cut/copy', function(e)
          {
             do something

          });

'evalname'是我HTML文本输入框的id。我试过像这样：

          $("#evalname").bind('delete', function(e)
          {
             do something

          });

但是它不起作用。有没有办法在Jquery/Javascript中映射右键点击+删除事件？

- ARUN P.S

---

我不确定我理解你的问题，你说的“删除”是指什么？是按钮还是上下文菜单选项？使用“更改事件”并将值与null/空字符串进行比较是否足够？ - Stefan

Answer 1

正如已经回答的那样，无法捕获浏览器上下文菜单删除的使用情况，事实上，使用 .bind('copy', func....) 不仅将监听上下文菜单的复制，还会监听实际绑定到剪贴板的 CTRL+c。我编写了一个插件，说实话有点粗糙，但它可以让你捕捉：

上下文复制、剪切、粘贴、删除 - ONLY

上下文复制、剪切、粘贴、删除 - AND - CTRL+c, CTRL+x, CTRL+v

或者只是上述方法中的一个、两个、三个或四个项目。当然，一个问题是IE不会触发jQuery的.bind('input', func....来监听更改，因此我需要为IE触发它，因此可能会有一个非常小的延迟(毫秒级)。该插件：

(function($) {
    $.fn.contextDelete = function(options) {
        var set = {
            'obj': $(this),
            'menu': false,
            'paste': false,
            'cut': false,
            'copy': false,
            'set': '',
            'ie': null,
        };
        var opts = $.extend({
            'contextDelete': function() {},
            'paste': function() {},
            'cut': function() {},
            'copy': function() {},
            'contextOnly': false,
        }, options);

        $(window).bind({
            click: function() {
                set.menu = false;
            },
            keyup: function() {
                set.menu = false;
            }
        });

        set.obj.bind({
            contextmenu: function() {
                set.menu = true;
                set.paste = false;
                set.cut = false;
                set.copy = false;
                set.val = set.obj.val();

                // Hack for IE:
                if ($.browser.msie) {
                    set.ie = setInterval(function() {
                        set.obj.trigger($.Event('input'));
                        if (!set.menu) {
                            clearInterval(set.ie);
                        }
                    }, 300);
                }
                // End IE Hack
            },
            paste: function(e) {
                set.paste = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.paste(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.paste(e);
                }
            },
            cut: function(e) {
                set.cut = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.cut(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.cut(e);
                }
            },
            copy: function(e) {
                set.copy = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.copy(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.copy(e);
                }
            },
            input: function(e) {
                if (set.menu && (!set.paste) && (!set.cut) && (!set.copy)) {
                    if (set.obj.val().length < set.val.length) {
                        opts.contextDelete(e);
                        set.menu = false;
                    }
                }
            }
        });
    };
})(jQuery);

一个示例用法，上下文菜单删除 + 上下文菜单复制仅限于此：

$('#evalname').contextDelete({
    contextDelete: function(e) {
        alert('You just deleted something!');
    },
    copy: function(e) {
        alert('You just copied something!');
    },
    contextOnly: true,
});

Click Here for a DEMO

- Scoobler

---

第二个例子在Xubuntu上的Firefox 25.0.1中无法工作。 - Dave Jarvis

我刚在Windows 7上的Firefox 47上测试过，对我而言它是有效的。 - mj_

Answer 2

为了进一步解释Stefan的评论和UberNeet的答案：

你无法从上下文菜单中检测到“删除”选项。

你可以检测输入内容的更改，例如在keyup（这将捕获删除键）或on change或blur（这将检测他们是否清空字段并单击其他位置）时。

如果你想知道它何时被清空，即使他们没有离开该字段，那么你可以尝试设置一个定时器每半秒轮询，并检查该字段是否为空。谨防使用过紧的定时器以免过度消耗用户的浏览器资源。

这些都不是理想的解决方案，但这就是在浏览器内部工作的乐趣所在！

- Hippyjim

Answer 3

截至今天，我不认为浏览器已经实现了它。

复制、粘贴和剪切事件已被添加为与剪贴板交互的功能，由于删除不是剪贴板的一部分，因此它尚未实现。

浏览器支持表（2011/04） http://codebits.glennjones.net/editing/setclipboarddata.htm

WebKit文档 http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/CopyAndPaste.html

Firefox文档 https://developer.mozilla.org/en/DOM/element#Event_Handlers

- guzart

Answer 4

尝试在特定时间间隔后检查“evalname”字段的值。使用此方法，我们可以检测到上下文菜单的剪切/复制/粘贴/删除操作。

 var evalnameLength=$("#evalname").val().length;
    var enableSave;
        enableSave=setInterval(function(){
            if(evalnameLength!=$("#evalname").val().length){
                do something;
                clearInterval(enableSave);
            }
        },500);

- Nirmala