JQuery, change-event ТОЛЬКО когда пользователь сам меняет ввод

мы можем обнаружить, что пользователь что-то меняет:

$('#item').change(function() { 
    alert('changed!');
});

К сожалению, иногда мне нужно называть это искусственно: $('#item').change(), но в этом случае он также воспринимается как "измененный". Есть ли способ отличить пользовательскую активность от ручного действия?

Ответ 1

Первым аргументом, возвращаемым обработчиком события jQuery, является объект события:

$('#item').change(function(e) { 
  console.log(e); // The event object
});

То, как я обычно различаю между инициируемым пользователем событием и событием, вызванным кодом, является то, что события, инициируемые пользователем, имеют свойство originalEvent, прикрепленное к ним. Я не знаю, подходит ли это лучший подход, но я бы сделал это следующим образом:

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

Пример

Введите в элементе 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();
});

<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>

Ответ 2

В другом подходе из originalEvent должны использоваться параметры события:

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

$( "#item").trigger( "change", [ "machine"] );

Ответ 3

Параметр события обратного вызова будет содержать ключ originalEvent, когда событие запускается пользователем, поэтому вы можете сделать:

    $('#item').change(function(e){
        if (e.originalEvent){
            alert('Changed by user');
        }
        // Place common code here
    });