Question

我有一个功能，但有两个事件。输入和按键的第一个事件，按钮和点击的第二个事件。

  <input class="text">
  <button class="btn">Next</button>

和jquery代码：

        function submit() {
          var inputValue = $( '.text' ).val();
          alert('inputValue');
        };

        $('.btn').on('click', function () {
          submit();
        });
        $('input').keydown(function(e) {
          if(e.which == 13) {
            submit();
          }
        });

我可以加入这两个活动吗？

Answer 1

试试这个......

    $( '.btn, input' ).on( 'click keydown',  function ( event ) {
        if( ( event.type == 'click' )
            || ( event.type == 'keydown' && event.which  == 13 ) ) {
           //submit(); submit your form
           alert('hi');
        };
    } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text">
<button class="btn">Next</button>

Answer 2

是的，你可以。

为输入和按钮添加相同的事件侦听器。

然后，在事件处理程序内部检查事件的类型。如果类型为keyup，请检查是否有正确的密钥。如果两者都满足（keyup和which === 13），您可以提交。否则，如果type为click，您也可以提交。

示例：https://jsfiddle.net/p33kmbja/1/

Answer 3

e.type - 我们可以确定类型事件 - click或keydown。

$(e.target) - 我们得到jQuery object，这是由一个事件造成的。

e.which != 13 - 确定推Enter。

$('.btn, input').on('click keydown', function (e) {
    if( (e.type == 'keydown')
         && $(e.target).is('input') 
         && (e.which != 13) ) return; 

    submit();
});

如何结合两个事件按键和点击

3 个答案: