一千萬個為什麽

搜索

如何檢測右鼠標單擊+刪除使用Jquery/Javascript

我想在html文本輸入上跟蹤右鍵單擊+刪除事件。我成功映射右鼠標單擊+粘貼/剪切/復制如下

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

          });

這裏'evalname'是我的html文本輸入的id。我試過了

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

          });

但沒有工作。有沒有辦法在Jquery/Javascript中映射鼠標右擊+刪除事件?

最佳答案

正如已經回答的那樣,不可能在瀏覽器上下載菜單中使用刪除,事實上,使用 .bind('copy',func ....)不僅會收聽contextmenu的副本,還有 CTRL + c ,因為它實際上綁定到剪貼板。

我已經把一個插件放在一起,說實話是一個黑客,但它會讓你抓住:

  • Context COPY, CUT, PASTE, DELETE - ONLY
  • 上下文COPY,CUT,PASTE,DELETE - 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);
    

    一個示例用法,contextmenu delete + context copy ONLY

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

    點擊此處查看演示

    轉載註明原文: 如何檢測右鼠標單擊+刪除使用Jquery/Javascript