如何创建一个Shift键+鼠标单击事件，将单击时黑色按钮的颜色更改为黄色按钮？ 的JavaScript

Question

我正在创建一个扫雷游戏，并试图创建一个事件，如果用户按住Shift键并同时单击鼠标左键，那么我为该字段创建的按钮（背景颜色为黑色）将变为黄色，以指示被标记的按钮。 这是我到目前为止所拥有的。 属性（'data-value'，0）表示该按钮没有地雷或数字标签，以指示其距地雷的距离。

JS：

$('button').getAttribute('data-value', 0).getAttribute('data-x', j).getAttribute('data-y', i).getAttribute('data-visible', false).getAttribute('data-mine', false).click(function (e) {
    if (e.shiftKey) {
        $('button').addClass('flag');
    }
});

CSS：

table td button {
    background-color: black;
    color: white;
    width: 2em;
    height: 2em;
}

.flag {
    background-color: yellow;
}

谢谢您的帮助。

Answer 1

如果您无法检测到按键组合，则可以使用以下脚本进行操作，请参见以下代码，尝试按SHIFT+ mouse left click进行检测。

 let ShiftOn = false; $(document).ready(function() { $(document).keydown(function(e) { let isShiftOn = e.which == "16"; (isShiftOn) && (ShiftOn = true); }).keyup(function() { ShiftOn = false; }); $("#detectable-area").on('click', function() { (ShiftOn) && console.log('SHIFT +LEFT Click'); }); }); 

 div#detectable-area { width: 100%; height: 250px; background: #c8c8c8; vertical-align: middle; text-align: center; line-height: 250px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="detectable-area">Press SHIFT + click anywhere in the div to detect.</div>