如何使用 Jquery/Javascript 检测鼠标右键单击 + 删除答案

【问题标题】：How To Detect Right Mouse Click + Delete Using Jquery/Javascript如何使用 Jquery/Javascript 检测鼠标右键单击 + 删除
【发布时间】：2012-02-02 09:58:08
【问题描述】：

我想在 html 文本输入上跟踪鼠标右键单击 + 删除事件。我成功映射鼠标右键单击+粘贴/剪切/复制如下

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

          });

这里的 'evalname' 是我的 html 文本输入的 id。我试过了

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

          });

但不工作。有没有办法在 Jquery/Javascript 中映射鼠标右键单击 + 删除事件？

【问题讨论】：

不确定我是否理解您的问题，“删除”是什么意思？所选文本上的上下文菜单选项按钮？使用change event 并将值与空/空字符串进行比较还不够吗？

标签： javascript jquery

【解决方案1】：

正如已经回答的那样，无法识别正在使用的浏览器 contextmenu delete，事实上，使用 .bind('copy', func....) 不仅会监听 contextmenu 的副本，还会监听 CTRL+c，因为它实际上是绑定到剪贴板。

我已经整理了一个插件，老实说这有点小技巧，但它可以让你抓住：

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

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

或者只是一个，两个，三个或四个项目（s）在上述任何一种方式。当然一个问题是 IE，它不会触发 jQuerys .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

【讨论】：

第二个示例不适用于 Xubuntu 上的 Firefox 25.0.1。
我刚刚在 Windows 7 上的 Firefox 47 上进行了测试，它对我有用。

【解决方案2】：

扩展 Stefan 的评论和 UberNeet 的回答：

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

您可以检测到输入内容的更改，无论是在 keyup （将捕获删除键）或更改或模糊（这将检测他们是否清空字段并单击某处否则）。

如果您想知道它被清空的时刻，即使他们没有离开该字段，那么您可以尝试设置一个计时器以每半秒轮询一次，并检查该字段是否为空。小心不要使用太紧的计时器，以免用户的浏览器过度使用。

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

【讨论】：