代码之家 › 专栏 › 技术社区 › RageZ

DOM事件和目标元素

dom events jquery

RageZ · 技术社区 · 15 年前

这里出现了我的问题,我在一些p标记上注册dblclick事件,当用户双击这个标记时,他可以编辑内容。到目前为止,唯一的问题是,如果p标记包含其他标记,并且用户单击它,那么只有该标记的内容是可编辑的。

为了澄清一点,这里来个样品

<html>
    <head>
        <title>Test Event</title>
        <script src="http://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.3");
            google.setOnLoadCallback(function() {
                $(function(){
                    $('#catchme').bind('dblclick', function(e){
                        alert(e.target.innerHTML);
                    });
                });
            });

        </script>
        <style>
            .bk_yellow {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p id="catchme">Lorem ipsum dolor sit amet, <span class="bk_yellow">consectetur adipiscing elit. Phasellus</span> tempor nisl a velit commodo pellentesque. Pellentesque vitae posuere quam. Ut vitae justo nec quam bibendum placerat eu et diam. Morbi nec tellus sit amet libero lacinia vestibulum. Donec vulputate libero eget enim rhoncus dapibus. Sed mattis lobortis est sit amet facilisis. Proin porta lobortis commodo. Sed quis erat a elit malesuada tincidunt at in dui. Nunc sit amet pellentesque odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus dictum justo sed enim pharetra sollicitudin. Cras at tortor ante, at interdum nisi. Proin pulvinar sodales imperdiet. Aliquam mi ipsum, suscipit tincidunt lobortis eget, venenatis nec lorem. Sed euismod enim volutpat nisi vulputate iaculis. </p>
    </body>
</html>

如果单击非黄色文本,则一切正常;如果单击黄色,则仅转储范围的内容。是否有一种方法可以使dom实际引用事件已注册的元素?

我在我们家的眉毛CMS中使用这个技术,这个bug有点烦人。

我想如果没有办法避免这种行为,我就必须以某种方式将元素附加到事件上。

PS:这个示例使用jquery,但是实际的cms使用extjs,所以任何jquery特定的答案都是不好的。

2 回复 | 直到 15 年前

Ben Regenspan 15 年前

您需要E.CurrentTarget,而不是E.Target。 Explanation of the differences 是的,命名很混乱。

James Black 15 年前

我想你可能想用萤火虫看看 (e) 变量具有as属性。

在jquery中,这项工作: alert(e.currentTarget.innerHTML);

而不是 e.target.innerHTML .

所以,问题是你使用了错误的属性,但是我以前没有使用过extjs,所以我不能提供任何指导。

如果必须手动执行此操作,要将事件转换为目标,我将使用以下方法执行此操作:

targetFromEvent = function(e) {
        var targ;
        if (!e) {
            e = window.event;
        }
        if (e.target) {
            targ = e.target;
        } else if (e.srcElement) {
            targ = e.srcElement;
        }
        if (targ.nodeType == 3) { // defeat Safari bug
            targ = targ.parentNode;
        }
        return targ;
    };