前端经典面试题合集, 什么是点击穿透,怎么解决?

QA

Step 1

Q:: 什么是点击穿透？

A:: 点击穿透是指用户在点击一个半透明的浮层或覆盖层时，这个点击事件不仅作用在浮层上，还会透过浮层作用到浮层下的元素上，造成误操作。

Step 2

Q:: 如何解决点击穿透问题？

A:: 可以通过以下几种方法解决点击穿透问题： 1. 使用事件冒泡阻止：在浮层的点击事件中调用 event.stopPropagation() 方法来阻止事件冒泡。 2. 使用定时器延迟处理：在浮层消失后，设置一个短暂的延时再处理点击事件，防止穿透。 3. 设置浮层的 pointer-events 为 none：在浮层上设置 pointer-events: none; 来阻止浮层接受点击事件。

Step 3

Q:: pointer-events 属性的作用是什么？

A:: pointer-events 是一个 CSS 属性，用来控制元素是否能响应鼠标事件。值为 none 时，元素不会成为鼠标事件的目标，即鼠标点击、悬停等事件将不会触发。

Step 4

Q:: 事件冒泡和事件捕获的区别是什么？

A:: 事件冒泡是指事件从最具体的元素开始发生，然后逐级向上传播到最不具体的元素（通常是文档）。事件捕获则是相反的，事件从最不具体的元素（通常是文档）开始，逐级向下传播到最具体的元素。

Step 5

Q:: 如何使用 JavaScript 来防止事件冒泡？

A:: 可以使用 event.stopPropagation() 方法来阻止事件冒泡。

用途

点击穿透问题在前端开发中比较常见，尤其是在处理多层叠加的界面元素时（如模态框、浮动层、下拉菜单等）。如果不解决点击穿透问题，用户可能会误操作，导致用户体验差。因此，这类问题需要在实际生产环境中及时处理。\n

相关问题

🦆

什么是事件委托?▷

事件委托是指把一个或多个元素的事件监听器绑定到它们的父元素上，通过事件冒泡机制来处理子元素的事件。这样可以提高性能和减少内存消耗。

🦆

如何实现一个简单的事件委托?▷

可以在父元素上绑定事件监听器，通过 event.target 来判断实际触发事件的子元素，然后执行相应的逻辑。例如： document.querySelector('ul').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { alert('List item clicked'); } });

🦆

什么是防抖和节流?有什么区别?▷

防抖和节流都是优化高频率事件触发的方法。防抖（debounce）是在事件触发后等待一段时间，如果这段时间内再次触发事件，则重新计时。节流（throttle）是在一定时间间隔内，只允许事件触发一次。防抖适用于减少不必要的频繁调用，如输入框实时搜索；节流适用于限制事件的频繁触发，如滚动事件监听。

🦆

如何实现防抖函数?▷

防抖函数的简单实现如下： function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; }

🦆

如何实现节流函数?▷

节流函数的简单实现如下： function throttle(func, limit) { let lastFunc; let lastRan; return function(...args) { if (!lastRan) { func.apply(this, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if ((Date.now() - lastRan) >= limit) { func.apply(this, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; }

什么是 BOM 和 DOM分别列举一些它们的函数什么是CSS盒子模型？