Question

我正在修复网站上的跨浏览器错误，并且发现它的原因是jQuery Click＆amp;根据您的浏览器，在不同时间更改事件。

例如，在Chrome和Firefox上，Click事件会在更改事件之前触发。在Safari或IE 11上，反之亦然。

我原本以为通过使用jQuery，这不会发生，因为jQuery因为跨浏览器兼容性而经过充分测试而闻名。

无论如何，是否可以使用jQuery / JavaScript确保.click函数中的代码始终在.change函数中的代码之前执行，而不管浏览器是什么？
我知道，通过下面的例子，我可以把所有事情都放在其中一个事件中，但我想知道我能问的是否可能。

以下是代码

的示例

＆＃13;

var $input = $('input[name="foobar"]');
$input.click(function() {
  console.log( "Click event called for input with value " + $(this).val() );
  });
$input.change(function() {
  console.log( "Change event called for input with value " + $(this).val() );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="http://example.com/checkout/add/" id="product_addtocart_form" method="post" name="product_addtocart_form">
  <ul>
    <li>
      <label for="option_1">
	 <input value="10" name="foobar" checked="checked" data-name="foo" id="option_1" type="radio">
	 <span>Foo</span>
      </label>
    </li>
    <li>
      <label for="option_2">
	<input value="12" name="foobar" data-name="bar" id="option_2" type="radio">
	<span>Bar</span>
      </label>
    </li>
  </ul>
  <button onclick="productAddToCartForm.submit(this)" title="Add to Basket" type="button">Add to Basket</button>
</form>

＆＃13;

如果您运行代码段并单击单选按钮，则会在控制台中看到要触发的事件的顺序。

我已经在Chrome 60，FireFox 54，Safari 10.1和Internet Explorer 11上进行了测试

Answer 1

一种选择是定义自定义事件并使用.trigger()在click事件处理程序

中调度事件

var $input = jQuery('input[name="foobar"]');
$input.on("click", function() {
  console.log( "Click event called for option with value " + jQuery(this).val() );
  $(this).trigger("customChange", ["customChange called from click handler"])
  });
$input.on("customChange", function(e, customChangeData) {
  console.log( "Change event called for option with value " + jQuery(this).val(), customChangeData );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="http://example.com/checkout/add/" id="product_addtocart_form" method="post" name="product_addtocart_form">
  <ul>
    <li>
      <label for="option_1">
	 <input checked="checked" data-name="foo" id="option_1" name="foobar" type="radio" value="10">
	 <span>Foo</span>
      </label>
    </li>
    <li>
      <label for="option_2">
	<input data-name="bar" id="option_2" name="foobar" type="radio" value="12">
	<span>Bar</span>
      </label>
    </li>
  </ul>
  <button title="Add to Basket" type="button">Add to Basket</button>
</form>

为什么jQuery Click＆amp;更改事件在Chrome与Safari或IE上的不同时间点火

1 个答案: