Question

假设我想激活myFunction，前提是用户已使用键按下了段落并单击它。在下面的情况中，如果任何事件为真，则会触发该函数。

<p id="p1" onClick="myFunction()" onKeyDown="myFunction()">
Text awaiting to be colored in red</p>

<script>
    function myFunction(){
        document.getElementById("p1").style.color = "red";
    }
</script>

Answer 1

你需要一个额外的变量isKeyDown，isKeyDown应该在keydown上设置为true，并在keyup上设置为false。

然后点击回调检查isKeyDown为true，调用myFunction。

Answer 2

您需要分解为两种方法。首先是击键 - >点击然后点击 - >击键。我不确定这是否可以在纯/香草javascaript上实现。但是在jquery上它就像是：

$('#p1' ).keydown(function() {
  if($('#p1').click()) {
    document.getElementById("p1").style.color = "red";
  }
});

$('#p1')click(function () {
  if($('#p1').keydown()) {
    document.getElementById("p1").style.color = "red"; 
  }
 });

Answer 3

如何做到这一点的一个例子。这适用于Enter，通常会点击它。你真的不需要制作p focus，但我认为它很整洁，即使你仍然可以处理来自文档的关键事件，因为点击只会在p上注册＆＃39}没什么值得担心的。

＆＃13;

var p = document.getElementById('p1');
p.addEventListener('mousedown', function(e) {
  p.clicked = true;
  checkEvents(p);
});

p.addEventListener('mouseup', function(e) {
  p.clicked = false;
});

p.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
    p.enterDown = true;
  }
});

p.addEventListener('keyup', function(e) {
  checkEvents(p);
  if (e.keyCode === 13) {
    p.enterDown = false;
  }
});

function checkEvents(el){
  if(el.enterDown && el.clicked){
    el.style.backgroundColor = 'red';
    }
  }

＆＃13;

p:focus {
  outline: none;
  }

＆＃13;

<p id="p1" tabindex='0'>
  Text awaiting to be colored in red</p>

＆＃13;

Javascript仅在两个事件都为真时才触发一个函数

3 个答案: