window.onerror 和window.addEventListener('error')的区别

`window.onerror`和`window.addEventListener('error')`都是用于捕获JavaScript运行时错误的方法，但是它们有一些区别。

`window.onerror`是一个全局事件处理函数，当JavaScript运行时错误发生时，会调用该函数。该函数有三个参数：错误消息、错误文件的URL和错误所在行号。需要注意的是，该函数只能捕获语法错误和运行时错误，不能捕获资源加载错误。

`window.addEventListener('error')`是用于捕获资源加载错误的方法，例如图片加载失败、CSS文件加载失败等。当这些错误发生时，会触发该事件。该事件也有三个参数：错误消息、错误文件的URL和错误所在行号。需要注意的是，该事件不会捕获语法错误和运行时错误。

因此，它们的主要区别在于捕获的错误类型不同。`window.onerror`主要用于捕获语法错误和运行时错误，而`window.addEventListener('error')`主要用于捕获资源加载错误。

相关问题

window.addeventlistener('onerror') 执行了多次

window.addeventlistener('onerror') 执行多次会导致多个错误处理程序被绑定到页面上。每个处理程序都会在页面中出现错误时触发。这可能会导致错误消息被多次处理，从而导致代码的重复执行，降低代码的性能和可靠性。

另外，如果多个处理程序被绑定到同一个错误事件上，它们的执行顺序可能是不确定的。这可能会导致出现错误时的行为不稳定，因为不同的处理程序可能会尝试执行不同的修复操作，导致代码的冲突和错误。

为了避免这些问题，建议在页面上只绑定一个错误处理程序，并确保它能够处理所有出现的错误。可以使用 try-catch 语句来捕获和处理所有可能发生的错误，并根据需要记录或显示错误消息。另外，可以使用浏览器提供的开发者工具来调试代码，并查找并修复所有的错误。

<template> <div class="container"> <div class="button" ref="buttonRef" :style="buttonStyle" @mousedown="startDrag" @touchstart="startDrag" > Button </div> </div> </template> <script> export default { data() { return { buttonIndex: 0, isDragging: false, initialPosition: { x: 0, y: 0 }, currentPosition: { x: 0, y: 0 } }; }, computed: { buttonStyle() { return { transform: `translate(${this.currentPosition.x}px, ${this.currentPosition.y}px)` }; } }, methods: { moveButton() { this.buttonIndex = Math.floor(Math.random() * 24); }, startDrag(event) { event.preventDefault(); // 计算初始位置 const boundingRect = this.$refs.buttonRef.getBoundingClientRect(); this.initialPosition = { x: event.clientX || event.touches[0].clientX, y: event.clientY || event.touches[0].clientY }; // 更新当前位置 this.currentPosition = { x: boundingRect.left, y: boundingRect.top }; // 监听移动和释放事件 window.addEventListener('mousemove', this.handleDrag); window.addEventListener('touchmove', this.handleDrag, { passive: false }); window.addEventListener('mouseup', this.stopDrag); window.addEventListener('touchend', this.stopDrag); }, handleDrag(event) { event.preventDefault(); // 计算移动距离 const clientX = event.clientX || event.touches[0].clientX; const clientY = event.clientY || event.touches[0].clientY; const deltaX = clientX - this.initialPosition.x; const deltaY = clientY - this.initialPosition.y; // 更新当前位置 this.currentPosition = { x: this.currentPosition.x + deltaX, y: this.currentPosition.y + deltaY }; }, stopDrag() { // 停止拖动，移除事件监听器 window.removeEventListener('mousemove', this.handleDrag); window.removeEventListener('touchmove', this.handleDrag); window.removeEventListener('mouseup', this.stopDrag); window.removeEventListener('touchend', this.stopDrag); } } }; </script> <style> .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { width: 80px; height: 40px; background-color: #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; } </style> 执行时出现了以下错误[Vue warn]: Error in v-on handler: "TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function" (found at pages/Dragging/Dragging.vue:1) 22:21:10.359 TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function怎么改正

这个错误是因为`getBoundingClientRect()`方法不适用于Vue组件的ref属性。要解决这个问题，你可以使用`$el`来访问DOM元素并调用`getBoundingClientRect()`方法。修改代码如下：

startDrag(event) {
  event.preventDefault();

  // 计算初始位置
  const boundingRect = this.$refs.buttonRef.$el.getBoundingClientRect();
  // 其他代码...
},

通过`this.$refs.buttonRef.$el`可以获取到引用的DOM元素，然后再调用`getBoundingClientRect()`方法即可。这样就能正确获取按钮元素的位置信息了。记得在其他地方也要相应地修改代码。希望对你有帮助！