1

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

<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 之间点击，那么目标将是parentDiv。

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

4

2 回答 2

2

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

除了处理项目上的事件，您还可以处理容器上的事件并遍历子项并检查child.offsetTop并child.offsetHeight找到在鼠标单击后开始的第一个子项。

一旦您知道您可以决定是否要考虑单击子项，或者单击子项与下一个或上一个子项之间的单击，例如通过考虑

  • y < child.offsetTop + child.offsetHeight*0.1孩子和以前的人之间
  • y > child.offsetTop + child.offsetHeight*0.9在孩子和下一个之间
  • 否则是点击孩子
于 2013-10-12T05:39:53.497 回答
0

您可以存储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;
    }
}

希望你明白其中的逻辑。

于 2013-10-12T05:30:10.230 回答