不同页面锚点点击事件仅第一个生效，求助问题原因与解决方法

核心问题1：错误的条件判断逻辑 #

你把addEventListener直接放在if的条件表达式里，这是完全错误的写法。addEventListener的返回值是undefined，所以if(undefined)会被判定为false，程序会直接进入后续的else if分支。

核心问题2：跨页面元素不存在导致报错 #

两个锚点分别在不同页面，所以当前页面中必然有一个元素是null。当程序进入else if分支时，会尝试对null调用addEventListener，直接抛出TypeError，第二个事件的绑定代码会因为报错无法执行。

正确的写法 #

应该先判断元素是否存在，再绑定事件，不要把绑定操作放在条件判断里：

const anchor1El = document.getElementById('a1')
const anchor2El = document.getElementById('a2')

// 先判断元素存在，再绑定事件
if (anchor1El) {
  anchor1El.addEventListener('click', function onefn() {
    alert('link 1 was clicked')
  })
}

if (anchor2El) {
  anchor2El.addEventListener('click', function twofn() {
    alert("link 2 was clicked")
  })
}

为什么之前的尝试没用？ #

• 用let替换const：这和元素是否存在、事件绑定逻辑无关，解决不了根本问题。
• 改用onclick属性：如果还是用错误的if条件包裹，同样会因为对null赋值的操作报错，导致逻辑错误，自然解决不了问题。

内容的提问来源于stack exchange，提问作者Santiago Mosquera