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

debugcn 发表于 Dev

澳洲人

我可以找到很多组合按键和点击事件。虽然我找不到一种结合了文档上的按键和链接上的单击事件的方法。

如何缩短此代码？请记住，我不想在整个文档中添加单击事件，也不想像我一样重复代码。

我的代码是这样的，如果你按键盘上的“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 在 Chrome 中遇到“S”或单键问题。所以我把它改成了keydown。很好用 :-)

拉姆·塞格夫

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。