jQuery,仅在用户自己更改输入时更改事件

Joh*_*ith 15 javascript jquery event-handling

我们可以检测用户是否更改了某些内容:

$('#item').change(function() { 
    alert('changed!');
});
Run Code Online (Sandbox Code Playgroud)

遗憾的是,有时我需要巧妙地称之为:$('#item').change()但在这种情况下,它也被视为"改变".有没有办法区分用户活动与手动活动?

Jam*_*lly 36

从jQuery事件处理程序返回的第一个参数是事件对象:

$('#item').change(function(e) { 
  console.log(e); // The event object
});
Run Code Online (Sandbox Code Playgroud)

我通常区分用户触发事件和代码触发事件的方式是用户触发事件originalEvent附加了属性.我不知道这是不是最好的方法,但我会这样做:

$('#item').change(function(e) { 
  if (e.originalEvent) {
    // user-triggered event
  }
  else {
    // code-triggered event
  }
});
Run Code Online (Sandbox Code Playgroud)

input下面的示例中键入元素,然后取消对元素的聚焦.你会得到警告说"user-triggered".单击按钮以调用代码触发的更改.你会得到警告说"code-triggered".

$('#item').change(function(e) { 
  if (e.originalEvent) {
    alert('user-triggered')
  }
  else {
    alert('code-triggered')
  }
});

$('button').on('click', function() {
  $('#item').change();
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type=text id=item />
<button>Click here to trigger change</button>
Run Code Online (Sandbox Code Playgroud)


Van*_*jx1 7

originalEvent应该使用事件参数的另一种方法:

$('#item').change(function(event, who) {
    if(who === "machine")
        alert('machine!');
    else
        alert('human!');
});

$("#item").trigger("change", ["machine"]);
Run Code Online (Sandbox Code Playgroud)