Question

我正在尝试在单击鼠标的位置插入内容。看看以下内容：

<div id="parentDiv">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

我知道我可以使用这样的代码获得点击的div：

function handleMouseClickEvent(e) {
    var evt = e ? e:window.event;
    var targ = evt.target ? evt.target:evt.srcElement;
}

但是，如果有人在div1和div2之间点击，则 targ 将为 parentDiv 。

有没有办法检测点击是否在子元素之前或之后，以便我可以在单击的确切位置插入内容？

Answer 1

您需要使用点击的坐标进行检查。

您可以处理容器上的事件并迭代子项并检查child.offsetTop和child.offsetHeight以查找鼠标单击后启动的第一个子项，而不是处理项目上的事件。

一旦你知道你可以决定是否要考虑点击孩子的点击，或者e孩子与下一个或前一个孩子之间的点击，例如通过考虑

y < child.offsetTop + child.offsetHeight*0.1
y > child.offsetTop + child.offsetHeight*0.9
否则点击孩子

Answer 2

您可以存储 evt.target ，然后在点击下一步时进行检查。例如

var elementClicked;
function handleMouseClickEvent(e) {
    if (elementClicked == "parent") {
       //-----handle based on your condition
    }
    else if (elementClicked == "div1"){
       //-----handle based on your condition    
    }
    else {
    var evt = e ? e:window.event;
    var targ = evt.target ? evt.target:evt.srcElement;
    elementClicked = targ;
    }
}

希望你理解逻辑。

检测鼠标是否在元素之前或之后

2 个答案: