在JavaScript中判断点击的是元素的实际文本还是空白区域

要区分右键点击的是元素的文本部分还是空白区域，你之前用item.textContent.trim() !== ''的判断逻辑不成立——只要元素本身包含文本，不管你点的是文本还是元素内的空白，这个条件都会返回true。

可以通过检测点击坐标是否落在文本的边界矩形内来实现，具体代码如下：

body.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    const clickX = e.clientX;
    const clickY = e.clientY;
    const target = e.target;

    // 创建Range对象，选中目标元素的所有文本
    const range = document.createRange();
    range.selectNodeContents(target);
    // 获取文本的所有边界矩形（每个文本片段的位置信息）
    const textRects = range.getClientRects();

    let isClickedOnText = false;
    // 遍历所有文本矩形，检查点击坐标是否在其中
    for (const rect of textRects) {
        if (clickX >= rect.left && clickX <= rect.right &&
            clickY >= rect.top && clickY <= rect.bottom) {
            isClickedOnText = true;
            break;
        }
    }

    // 根据结果执行对应逻辑
    if (isClickedOnText) {
        console.log('点击的是文本区域');
        // 这里写点击文本后的操作
    } else {
        console.log('点击的是空白区域');
        // 这里写点击空白后的操作
    }
});

逻辑说明： #

• document.createRange()创建一个范围对象，range.selectNodeContents(target)选中目标元素内的所有文本内容
• range.getClientRects()会返回文本内容对应的所有DOMRect对象，每个对象包含文本片段的位置和尺寸信息
• 遍历这些矩形，判断点击坐标是否落在任意一个矩形范围内，以此区分是点击了文本还是元素内的空白区域

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