如何结合本文档的按键和按钮点击事件

Question

我可以找到大量组合按键和点击事件。虽然我找不到将文档上的按键和 link.

上的点击事件结合起来的组合

如何缩短此代码？请记住，我不想向整个文档添加点击事件，并希望避免像我一样重复代码。

我的代码是这样的，如果你按下键盘上的 'S' 键，全屏就会出现，或者你可以按下搜索按钮。两者将执行相同的功能。

$(document).ready(function() {
  $(document).keydown(function(searchstock) {
    if(searchstock.which == 83) {
      $('#header-bar').toggleClass('displaysearch');
      setTimeout(
        function()
        {
          $('#ccstocknum').select();
        }, 75);
    }
  });
  $("#searchbtn a").on("click", function(){
    $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
  });
});

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>

我的想法是，如果我能改变：

if(searchstock.which == 83) {

类似于：

if(searchstock.which == 83) or $('#searchbtn a').on("click", function() {

虽然这显然行不通^_^

提前谢谢你:-)

更新 Keypress 在 'S' 或 Chrome 中的单个键有问题。所以我把它改成了keydown。工作愉快:-)

Answer 1

将代码放入一个函数中并调用它

$(document).ready(function() {
  $(document).keypress(function(searchstock) {
    if(searchstock.which == 83, 115) {
      searchstock();
    }
  });
  $("#searchbtn a").on("click", function(){
    searchstock();
  });
});
function searchstock(){
   $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
}

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>

你也可以这样使用.on()

$(document).ready(function() {
  $( "body" ).on({
    click: function(e) {
    if((e.target.tagName === 'A') && (e.target.parentNode.id === 'searchbtn'))
      searchstock();
    },
    keypress: function(e) {
      if((e.which == 83) || (e.which ==115)) {
        searchstock();
      }
    }
  });
});
function searchstock(){
   $('#header-bar').toggleClass('displaysearch');
    setTimeout(
      function()
      {
        $('#ccstocknum').select();
      }, 75);
}

#header-bar {
  display: none;
  float: left;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: black;
  color: #fff;
  text-align: center;
}
#header-bar.displaysearch { display: block; }
#header-bar h1 {
  width: 100%;
  text-align: center;
}
p.strong { font-weight: bold !important; }
#searchbtn { float: left; width: 100%; }
#searchbtn a { padding: 10px; background: grey; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="strong">Press S on the keyboard to get the fullscreen image</p>
<p>Alternatively you can press the following link</p>
<div id="searchbtn">
  <a href="#">Search</a>
</div>
<div id="header-bar">
  <h1>Full Screen</h1>
  <input type="number" id="ccstocknum" />
</div>

如何结合本文档的按键和按钮点击事件

How to combine this document keypress and button click events

jquery

onclick

keypress