Question

我在使用此代码在悬停元素并按shift键时切换背景。如果我在进入元素之前按住shift键但是如果我已经在元素上并且按下shift键，则它可以工作。想法？谢谢！

＆＃13;

var shiftPressed = null;
$(document).on({
	keydown: function (e) {
		if( e.shiftKey )
		{
		   shiftPressed = true;
		}
	},
	keyup: function (e) {
		shiftPressed = false;
	}
});
$('div').on({
   mousemove: function (e) {
	   if( shiftPressed )
	   {
			$(this).css('backgroundColor', 'red');
	   }
	   else
	   {
			$(this).css('backgroundColor', '');
		}
   },
   mouseover: function (e) {
	   if( shiftPressed )
	   {
			$(this).css('backgroundColor', 'red');
	   }
	   else
	   {
			$(this).css('backgroundColor', '');
		}
   },
   mouseleave: function (e) {
		$(this).css('backgroundColor', '');
   }
}, 'span');

＆＃13;

div {
  position:absolut;
  width:100px;
  height:100px;
  background:#999;
}

＆＃13;

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

＆＃13;

Answer 1

div无法聚焦（默认情况下）;因此，它无法捕获按键。

但是，如果将keypress事件侦听器绑定到文档，则每次按键时都会触发该事件。保持mouseover和mouseleave绑定到div，因为它们可以使用不可聚焦的元素触发。

此外， keyboard event与mouse event 不同，因此您无法在鼠标悬停时访问shiftKey e。相反，我会使用&&运算符来测试是否满足两个条件：shift键和鼠标输入，存储是否在布尔值中按下shift键并在mouseover / mouseleave上检查。

＆＃13;

var shiftPressed = null; // global data
$(document).on('keyup keydown', function(e) {
  shiftPressed = e.shiftKey;
  updateDivs();
});

$('div').on({
  mouseover: function(e) {
    $(this).data('hovered', true); // element-specific data
    updateDiv(this);
  },
  mouseleave: function(e) {
    $(this).data('hovered', false); // element-specific data
    updateDiv(this);
  }
});

function updateDiv(div) {
  if (shiftPressed && $(div).data('hovered'))
    $(div).css('backgroundColor', 'red');
  else
    $(div).css('backgroundColor', '');
}
/** updates all divs in document */
function updateDivs() {
  $('div').each(function() {
    updateDiv(this);
  });
}

＆＃13;

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

＆＃13;

Answer 2

您可以添加一堆代码来监听鼠标位置以及keydown的事件并找出光标所在的位置......

可能有更好的解决方案，但这有效。

$('div').on("mouseenter", "span", function(e) {
  if (e.shiftKey) {
    $(this).css('backgroundColor', 'red');
  }
}).on("mouseleave", "span", function(e) {
  $(this).css('backgroundColor', 'white');
})

let x = 0;
let y = 0;
$(document).on("mousemove", function(e) {
  x = e.clientX;
  y = e.clientY;
}).on("keydown keyup", function(e) {
  $(document.elementFromPoint(x, y)).trigger({
    type: e.type==="keydown" ? "mouseenter" : "mouseleave",
    shiftKey: true
  })
});

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

其他方法是设置一个活动元素，而不用担心x和y位置。

let active;
$('div').on("mouseenter", "span", function(e) {
  active = this;
  if (e.shiftKey) {
    $(this).css('backgroundColor', 'red');
  }
}).on("mouseleave", "span", function(e) {
  console.log(e)

  $(this).css('backgroundColor', 'white');
  if (active && !e.custTrigger && $(this).is(active)) active = null
})

$(document).on("keydown keyup", function(e) {
  if (active) {
    $(active).trigger({
      type: e.type==="keydown" ?"mouseenter" : "mouseleave",
      shiftKey: true,
      custTrigger: true
    })
  }
});

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

Answer 3

这有点草率但应该有效。只需设置一些变量，然后在事件被触发时检查它们。

N.B。您必须在iframe中单击一次才能使其工作（以便它可以捕获按键）。大概在您的网页上，您没有使用iframe，因此无需使用。

＆＃13;

Array.prototype.forEach.call(document.querySelectorAll('.box'), box => {
  let hover = false;
  let shift = false;
  
  box.addEventListener('mouseenter', ev => {
    hover = true;
    check();
  });

  box.addEventListener('mouseleave', ev => {
    hover = false;
    check();
  });

  document.addEventListener('keydown', ev => {
    shift = ev.shiftKey;
    check();
  });

  document.addEventListener('keyup', ev => {
    shift = ev.shiftKey;
    check();
  });

  function check() {
    box.style.backgroundColor = shift && hover ? 'red' : '';
  }
});

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: #999;
  margin: 5px;
  display: inline-block;
}

＆＃13;

<div class="box">
  <span>TARGET</span>
</div>

<div class="box">
  <span>TARGET</span>
</div>

<div class="box">
  <span>TARGET</span>
</div>

＆＃13;

Answer 4

keypress doesn't capture the shift-key

这个[keypress事件]类似于keydown事件，除了修饰符和非打印键（如Shift，Esc和delete）触发keydown事件而不是keypress事件。

如果悬停并按下shift键切换背景？

4 个答案: