javascript - 为什么使用错误的参数执行焦点处理程序？

Question

我在文本字段上有一个焦点处理程序:

$("#input").on("focus", (e) => {
    // do some stuff
});

但是，当我右键单击时，我不希望执行该焦点处理程序，所以我这样做了:

$("#input").on("mousedown", (e) => {
    if (e.button === 2) { // right click
        e.preventDefault();
    }
});

但是，这也会阻止文本字段在我右键单击时获得焦点。我仍然希望它获得焦点，我只是不想让处理程序执行，所以我手动触发了处理程序:

$("#input").on("mousedown", (e) => {
    if (e.button === 2) { // right click
        e.preventDefault();
        $("#input").trigger("focus", true);
    }
});

$("input").on("focus", (e, someParam) => {
    if (someParam) return;
    // do some stuff
});

这样，文本字段获得焦点，但我们立即从处理程序中返回。

我注意到的问题是，我第一次触发焦点处理程序时，someParam 是undefined，我们最终执行了do some stuff .对于所有后续的右键单击，someParam 为真。

我把触发focus handler的那行注释掉了，确实，focus handler从来没有被执行过，因为我们调用了preventDefault，所以看起来handler的第一次执行必然来自于$("#input").trigger("focus", true);.那么，如果我将 true 作为额外参数传递，为什么 someParam 未定义呢？

JsFiddle .在 Chrome 中测试。

Answer 1

这似乎是 jQuery 的当前问题。参见 this github issue .

作为解决方法，请尝试以下操作:

var a = $("#a");
var _focusData = null;

var focusEvent = (e) => {
    if (_focusData) {
        _focusData = null;
        return;
    }
    _focusData = null;
    var t = $("textarea").first();
    t.val(t.val() + "\nfocus");
};

a.on("mousedown", (e) => {
   if (e.button === 2) {
       e.preventDefault();
       var t = $("textarea").first();
       t.val(t.val() + "\n" + e.button);
       _focusData = true;
       a.trigger("focus");
   }
});

a.on("focus", focusEvent);

经过更多研究，包括尝试使用 $.Event 触发自定义事件，您最好的做法似乎是使用堆栈跟踪、污染全局范围或降级你的 jQuery 版本。