Question

假设我有以下3个按钮：

 $files = ['13150925581920IMG_0009.PNG','1328684363792113286843637921IMG_0009.PNG'];
 $random = rand(1111111111,9999999999);
 $zipname = 'photos_'.$random.'.zip';

 $zip = new ZipArchive;
 $zip->open($zipname, ZipArchive::CREATE);
 chmod($zipname, 777);

 foreach ($files as $file) {
   if(file_exists($file)){
     $zip->addFromString(basename($file),  file_get_contents($file));  
   }
 }

 $zip->close();

 header('Content-Type: application/zip');
 header('Content-disposition: attachment; filename='.$zipname);
 header('Content-Length: ' . filesize($zipname));
 readfile($zipname);

 header("Content-type: application/zip"); 
 header("Content-Disposition: attachment; filename=$zipname");
 header("Content-length: " . filesize($zipname));
 header("Pragma: no-cache"); 
 header("Expires: 0"); 
 readfile("$zipname");

是否可以通过按键盘上的 A 键来触发<div role="button" class="ico-btn"> Button A </div> <div role="button" class="ico-btn"> Button B </div> <div role="button" class="ico-btn"> Button C </div>，或者通过按键盘上的 B 键来触发Button A键盘等？诸如属性keypress =“ A”之类的东西可以使事情更容易访问？

Answer 1

这可以通过委托事件监听器轻松完成：

// listen for keys
document.addEventListener('keyup', function(event){

    // all divs with the attribute data-listening_key
    var elems = document.querySelectorAll('div[data-listening_key]');
    elems.forEach(function(element, index){

        // if the one it's listening for matches this event
        var listening_key = element.dataset.listening_key;
        if(listening_key === event.key){
            var clickEvent = new Event('click'); // create and dispatch a click to it!
            element.dispatchEvent(clickEvent);
        }
    });
});

<div data-listening_key='x' onclick="console.log('Button A clicked')">
    Button A
</div>
<div data-listening_key='y' onclick="console.log('Button B clicked')">
    Button B
</div>
<div data-listening_key='z' onclick="console.log('Button C clicked')">
    Button C
</div>

Answer 2

您可以addEventListener进行记录并检查keyCode。对于A，它是65

document.getElementById('btnA').addEventListener('click', triggerA)

// function which will trigger on click of A
// So dirctly clicking A this function will trigger. 
// This is just for validation
function triggerA() {
  console.log('A')
}

document.body.addEventListener('keyup', function(e) {
  if (e.keyCode === 65) {
    // on press of A the div#btnA is getting clicked
    document.getElementById('btnA').click();
  }
})

.ico-btn {
  border: 1px solid yellow;
  border-radius: 2px;
  margin: 5px;
}

<div role="button" class="ico-btn" id='btnA'>
  Button A
</div>
<div role="button" class="ico-btn">
  Button B
</div>
<div role="button" class="ico-btn">
  Button C
</div>

如何在按键时触发按钮单击？

2 个答案: