Question

我在Chrome和firefox如何执行此功能之间遇到了这个怪癖，但我无法弄清楚为什么firefox不会执行。我有一个复选框，函数侦听任何复选框中的任何更改，然后执行一些文本显示。但是，对于一个复选框，我想在完成之前中断通常的文本并对其进行一些正则表达式。所以，我有一个mousedown事件监听器试图获得这种效果。我的理由是mousedown将在checkbox更改事件之前执行代码（不确定所有浏览器是否都是这样）。

在这个mousedown函数中，一个名为amt的变量需要一个值时会出现奇怪现象。如果通过提示对话框输入变量amt，则FF将不执行该函数的其余部分。相反，如果通过amt元素输入相同的变量<input>，则该函数可以正常工作。在chrome中，使用任一种方法都可以获得相同的结果。

有人可以解释一下这个区别是否有更好的方法来“停止”某个功能，以便其他功能可以在完成之前运行？

这里有一个小提琴：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中无效？

1 个答案: