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 是未定义，我们最终执行do some stuff 。对于所有后续右键单击，someParam 为 true。

我注释掉了触发焦点处理程序的行，事实上，焦点处理程序永远不会被执行，因为我们调用了preventDefault，所以看起来处理程序的第一次执行必然来自$("#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 版本。