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

好的，现在我明白了，你可以做到

$('#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 2

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

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

Answer 3

据我所知，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 4

为什么你不选择输入框的值。你必须在准备好的功能上存储输入框的初始值

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

然后比较值

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

  });

使用JQuery更改事件优先级

4 个答案: