隐藏元素时如何禁用`accesskey`？答案

【问题标题】：How to disable `accesskey` when the element is hidden?隐藏元素时如何禁用`accesskey`？
【发布时间】：2017-03-07 01:17:39
【问题描述】：

请看下面的代码：

$('div').click(function(){
   alert("Shortcut worked although element was hidden!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div hidden accesskey="1">
    Some things...
</div>

<p>
  Focus on me and then 
  </br>
  <b>press [Alt + 1] please!</b>
</p>

当元素隐藏时如何禁用accesskey？

【问题讨论】：

标签： javascript jquery html hidden access-keys

【解决方案1】：

您可以在click事件中检查div是否为hidden：

$('div').click(function(event) {

  if (!$(this).is(':hidden')) {
    alert("Shortcut worked although element was hidden!");
  } else {
    event.preventDefault();
  }

});

https://jsfiddle.net/89b2jtmw/1/

【讨论】：

【解决方案2】：

我认为没有办法禁用accesskey，您只需要根据需要使用add / remove

if(!$('div').is(":visible"))
{
   $('div').removeAttr('accesskey');
}
else
{
   $('div').attr('accesskey', '1');
}

if(!$('div').is(":visible"))
{
  $('div').removeAttr('accesskey');
}
else
{
  $('div').attr('accesskey', '1');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div hidden accesskey="1">
    Some things...
</div>

<p>
  Focus on me and then 
  </br>
  <b>press [Alt + 1] please!</b>
</p>

【讨论】：

或者可以使用.data() 存储以前的值，以便您可以恢复该值而不是硬编码'1'。
或者如果你正在刷新页面，你也可以使用localStorage。