如何捕捉用户自己进行的手动下拉更改？

Question

我如何捕捉到由用户自己而不是在加载页面并将默认值分配给该下拉菜单时所做的下拉菜单更改？

我试过 e.originalEvent，但没用。

$(self.options.selectChange).change(function (e){
   // check if the change event is a user-triggered event
   if (e.originalEvent) {
      ...
   }
});

我有一个表单，其中有很多下拉菜单，每个下拉菜单都有一个在页面加载时设置的默认值。该操作被认为是下拉菜单，触发上面的代码，但我只想在用户手动更改选项时触发上面的代码。

我该怎么做？

Answer 1

您正在搜索 event.isTrigger

$('select').change(function(e) {
  console.log(e.isTrigger ? 'triggered' : 'manual')
})

$('button').click(function(e) {
  $('select').trigger('change')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option>a</option>
  <option>b</option>
</select>

<button>Trigger</button>

Answer 2

我认为更好的方法是标记您的处理程序。使用 label 参数创建自定义函数。

const customHandler = (label) => {

  if (typeof label !== 'string') {
    label = 'defaultLabel';
  }

  return (jQueryEvent, customData) => {

    let customLabel = customData ? customData.name : label;
    let jqElem = $(jQueryEvent.currentTarget);

    // you can use IF statements here based on your customLabel value

    console.log('this element was triggered by', customLabel);

  }

}

$("select").on('change', customHandler('changedByUser'));

const customTrigger = (label) => () => {

  $("select").trigger('change', {
    name: label || 'pageload'
  })

}

window.onload = customTrigger();
setTimeout(customTrigger('this-timeout'), 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>

<br />
<div id="output"></div>

如何捕捉用户自己进行的手动下拉更改？

How to catch manual dropdown change, made by the user itself?

javascript

jquery

select

onchange