使用 JQuery 更改事件优先级

Question

我有以下html代码：

<input type="text" id="theInput" value=""/>     
<a href="#" id="theLink">Click me</a>

我想检测输入何时更改并在这种情况下执行操作，但仅当用户没有单击链接时。我试过这个：

$('#theLink').live('click', function(){
  alert('click');
});

$('#theInput').live('change', function(){
  alert('change');
});

但是，由于 Javascript 事件优先规则，当输入中的值发生更改时，change 始终在 click 之前执行，因此仅显示“更改”消息。

我希望它仅在输入值更改并且用户在任何其他位置而不是链接单击退出输入时才显示change。在最后一种情况下，我想显示click。

例子是here。

我使用 jQuery 1.6.4。

Answer 1

据我所知，click 事件在每个浏览器中的blur 和change 事件之后触发（请查看this JSFiddle）。 blur 和 change 的顺序因浏览器而异（来源：Nicholas Zakas）。

要解决您的问题，您可以在文档上监听click 事件并将事件的目标与#theLink 进行比较。任何点击事件都会冒泡到文档中（除非它被阻止）。

试试这个：

var lastValue = '';

$(document).click(function(event) {
    var newValue = $('#theInput').val();

    if ($(event.target).is('#theLink')) {
        // The link was clicked
    } else if (newValue !== lastValue) {
        // Something else was clicked & input has changed
    } else {
        // Something else was clicked but input didn't change
    }

    lastValue  = newValue;
});

JSFiddle：http://jsfiddle.net/PPvG/TTwEG/

Answer 2

这两个事件都会触发，但在您的示例中，onmousedown 事件发生时触发的onchange 事件处理程序中的警报将停止触发onclick 事件所需的onmouseup 事件。使用 console.log 将显示这两个事件触发。

http://jsfiddle.net/hTqNr/4/

Answer 3

好的，我知道了，你可以做

$('#theLink').live('click', function(e){
    alert('click');
});

$('#theInput').live('change', function(e){
    //Check if the change events is triggerede by the link
    if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
         //if this is the case trigger the click event of the link
         $('#theLink').trigger("click");
    }else{
        //otherwise do what you would do in the change handler
        alert('change');
    }
});

在这里提琴http://jsfiddle.net/hTqNr/19/

Answer 4

为什么不选择输入框的值。您必须将输入框的初始值存储在就绪函数中

 initialvalue= $('#theInput').val();

然后比较值

 $('#theLink').live('click', function(){
    var newvalue =$('#theInput').val();
        if(newvalue!=initialvalue) {
            //do something
         }

  });