使用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.

这个例子在这里.

我使用jQuery 1.6.4.

Answer 1

据我所知，该事件在每个浏览器中的和事件click之后触发（看看这个 JSFiddle）。和的顺序在不同浏览器中是不同的（来源：Nicholas Zakas）。blurchangeblurchange

为了解决您的问题，您可以监听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/