为什么我的 jQuery 函数中的这个变量提示在 Chrome 中有效，但在 Firefox 中无效？

Question

我运行正在研究 Chrome 和 Firefox 如何执行此函数之间的这个怪癖，但我不明白为什么 Firefox 不执行。我有一个复选框，一个函数会侦听任何复选框中的任何更改，然后执行一些要显示的文本。但是，对于一个复选框，我想打断通常的文本并在完成之前对其执行一些正则表达式。所以，我有一个 mousedown 事件侦听器试图获得这种效果。我的理由是 mousedown 将在 checkbox 更改事件之前执行代码（不确定这是否适用于所有浏览器）。

奇怪的是，在此 mousedown 函数执行期间，名为 amt 的变量需要一个值。如果通过提示对话框输入变量 amt，Firefox 将不会执行其余功能。相反，如果通过 <input> 元素输入相同的变量 amt，则该函数可以正常工作。在 Chrome 中，使用任何一种方法都可以获得相同的结果。

有人可以解释一下区别吗，是否有更好的方法来“停止”一个函数，以便另一个函数可以运行在完成之前？

A fiddle 这里：http://jsfiddle.net/ufgvoghw/7/

JS

dxOuts = {
    dxOut100: 'ITEM #0:',
    dxOut101: 'ITEM #1:',
    dxOut102: 'ITEM #2: '
};
var final = '';
var sel = null;

$('#_box0').mousedown(function () {
    $('#dxOut100').prop('disabled', true); // <-- disable checkbox to ensure click event doesn't take place when label mousedown occurs
   //  var amt = prompt('Enter amount'); //<-- this doesn't work in firefox, but works in chrome
    var amt = $('#amt').val(); //<-- this works in FF and chrome
    dxOuts.dxOut100 = dxOuts.dxOut100.replace(/#[\d*(?=\d)]/, '#'+amt);
    $('#dxOut100').prop('disabled', false).trigger('click');
});
function printf(){
    final += dxOuts[sel] + '\n\n';
    $('#output').val(final);
}

$('input:checkbox').on('change', function () {
    if($(this).is(':checked')){
    sel = $(this).attr('id');
    printf();

    }
});

HTML

<label id="_box0">
    <input type='checkbox' id='dxOut100'>ITEM #</label>
<input id="amt" size=5>
<br>
<label id="_box1">
    <input type='checkbox' id='dxOut101'>ITEM #1</label>
<br>
<label id="_box2">
    <input type='checkbox' id='dxOut102'>ITEM #2</label>
<br>
<br>
<textarea id='output' cols=25 rows=5></textarea>

Answer 1

实际上，下面的代码正在按预期执行。问题是提示阻止了复选框的默认更改事件发生。所以字符串不会添加到输出的末尾。

为什么这么难？

如果您想为第一个复选框单独更改事件逻辑，只需这样做，并将公共代码移动到单独的函数中：

Fiddle

var dxOuts = {
    dxOut100: 'ITEM #0:',
    dxOut101: 'ITEM #1:',
    dxOut102: 'ITEM #2: '
};
var final = '';
var sel = null;

function printf(){
    final += dxOuts[sel] + '\n\n';
    $('#output').val(final);
}

//common code to call for all checkboxes
function checkboxCnahged(e) {
    var checkBox = $(e.target);

    if(checkBox.is(':checked')){
        sel = checkBox.attr('id');
        printf();
    }
}

$('#dxOut100').change(function (e) {
    if ($(e.target).is(':checked')) { // show prompt only if checked
        var amt = prompt('Enter amount'); // <-- now this works
        //var amt = $('#amt').val(); //<-- this works in FF and chrome
        console.log(amt);
        dxOuts.dxOut100 = dxOuts.dxOut100.replace(/#\d*/, '#' + amt); //fixed the regex to replace the whole number, not only the first digit
    }
    checkboxCnahged.apply(this, arguments);
});

$('input:checkbox:not(#dxOut100)').on('change', function () {
    checkboxCnahged.apply(this, arguments);
});

以及带有一个更改处理程序的较短版本：

Fiddle

var dxOuts = {
    dxOut100: 'ITEM #0:',
    dxOut101: 'ITEM #1:',
    dxOut102: 'ITEM #2: '
};
var final = '';
var sel = null;

function printf(){
    final += dxOuts[sel] + '\n\n';
    $('#output').val(final);
}

$('input:checkbox').change(function (e) {
    if ($(e.target).is(':checked')) { // show prompt only if checked
        if (e.target.id === 'dxOut100') {
          var amt = prompt('Enter amount'); // <-- now this works
          dxOuts.dxOut100 = dxOuts.dxOut100.replace(/#\d*/, '#' + amt); 
        }

        sel = e.target.id;
        printf();
    }
});

为什么我的 jQuery 函数中的这个变量提示在 Chrome 中有效，但在 Firefox 中无效？

Why does this variable prompt in my jQuery function work in Chrome but not Firefox?

jquery

firefox

jquery-events

prompt

mousedown