如何在通过 Tab 键切换到链接时运行一些 JS 代码，而不是在单击链接时运行一些 JS 代码？
我想要运行的代码是一些滚动。见下文...
var links = document.querySelectorAll('a')
links.forEach(function (link) {
link.addEventListener('focus', function (event) {
// if (focus caused by click) return 'Don't do anything.'
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
var y = link.getBoundingClientRect().top + scrollTop
return window.scroll({top: y - 20, behavior: 'smooth'})
})
})a {
display: block;
}
div {
height: 135px;
}<div>Some Space</div>
<a href="#1">One</a>
<div>Some Space</div>
<a href="#2">Two</a>
<div>Some Space</div>
<a href="#3">Three</a>
<div>Some Space</div>
<div>Some More Space</div>重点是，当用户单击链接时，我只想中止滚动并仅访问该链接(实际的默认行为)。相反，我得到了卷轴，但没有链接行为。我必须再次点击才能激活链接:(
最佳答案
直到客户端释放鼠标后才会发生点击，因此我必须在移动设备上使用 touchstart 并在桌面设备上使用 mousedown。
//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
const x = new XMLHttpRequest;
const c = context || x;
x.open('GET', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
x.send();
}
post = function(url, send, success, context){
const x = new XMLHttpRequest;
const c = context || x;
x.open('POST', url);
x.onload = ()=>{
if(success)success.call(c, JSON.parse(x.responseText));
}
if(typeof send === 'object' && send && !(send instanceof Array)){
if(typeof FormData !== 'undefined' && send instanceof FormData){
x.send(send);
}
else{
let s, r = [];
for(let p in send){
s = send[p];
if(typeof s === 'object')s = JSON.stringify(s);
r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
}
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&'));
}
}
else{
throw new Error('send argument must be an Object');
}
return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
// you can put the below on another page in a load Event - besides the end load and below
const inputs = Q('#inputs>input');
let yup = true;
function falseYup(){
yup = false;
}
for(let n of inputs){
if(mobile){
n.ontouchstart = falseYup;
}
else{
n.onmousedown = falseYup;
}
n.onfocus = ()=>{
console.clear(); console.log(yup); // test for yup here then set to true later
yup = true;
}
}
}); // end load
//]]>/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.main{
padding:10px;
}
label,input[type=text]{
width:100%; font:bold 22px Tahoma, Geneva, sans-serif;
}
input[type=text]{
width:100%; padding:3px 5px; margin-bottom:7px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div id='inputs'>
<label for='input1'>Input 1</label><input id='input1' type='text' value='' />
<label for='input2'>Input 2</label><input id='input2' type='text' value='' />
<label for='input3'>Input 3</label><input id='input3' type='text' value='' />
</div>
</div>
</body>
</html>关于javascript - 触发焦点操作，但仅当不是由于单击而触发时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60822819/