关于gotoUrl函数中event.returnValue与cancelBubble作用的技术疑问

你提到的这段代码确实有点反直觉，尤其是没声明event却直接调用的部分，我来一步步给你理清楚：

首先先把代码贴出来方便查看：

function gotoUrl(url) { 
  document.location= url; 
  event.returnValue=false; 
  event.cancelBubble=true; 
}

1. 没声明的event到底是什么？ #

这是**旧版IE（IE8及更早）**的遗留写法！在这些老浏览器里，当事件触发（比如用户点击某个元素）时，浏览器会自动把当前的事件对象挂载到全局的event变量上。所以这个函数肯定是被用作某个元素的点击事件处理函数，比如像这样写在HTML里：

<a href="some-old-link.html" onclick="gotoUrl('https://new-target.com')">点我跳转</a>

当用户点击这个链接时，全局的event就会指向这次点击的事件对象，函数里就能直接调用它的属性和方法了。放到现代浏览器里，这种写法其实不规范，标准做法是把event作为参数传入函数。

2. event.returnValue=false的作用 #

在旧版IE里，这行代码是用来阻止事件的默认行为的。比如刚才的例子里，<a>标签本身的默认行为是跳转到href里的some-old-link.html，加上returnValue=false就会取消这个默认跳转，避免和document.location=url的强制跳转产生冲突。

放到标准DOM规范里，对应的写法是event.preventDefault()，returnValue是IE独有的属性。

3. event.cancelBubble=true是干嘛的？ #

同样是旧版IE的写法，对应标准里的event.stopPropagation()，作用是阻止事件冒泡。举个例子：如果这个<a>标签的父元素（比如一个<div>）也绑定了点击事件，那点击<a>的时候，事件会先触发<a>的点击逻辑，再向上传递触发父元素的点击逻辑。加了cancelBubble=true之后，事件就只会停留在<a>这里，不会往上跑了，避免误触发父元素的事件。

最后补个现代浏览器的标准写法参考 #

如果要兼容现代浏览器，更规范的写法应该是这样：

function gotoUrl(url, event) { 
  // 兼容新旧浏览器的事件对象获取
  const evt = event || window.event;
  
  document.location = url;
  
  // 阻止默认行为
  if (evt.preventDefault) {
    evt.preventDefault();
  } else {
    evt.returnValue = false;
  }
  
  // 阻止事件冒泡
  if (evt.stopPropagation) {
    evt.stopPropagation();
  } else {
    evt.cancelBubble = true;
  }
}

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