DOM事件和目标元素

时间:2009-10-23 01:39:26

标签: jquery events dom

这里出现了我的问题我正在某些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 个答案:

答案 0 :(得分:3)

你想要e.currentTarget,而不是e.target。 Explanation of the differences;是的,命名很混乱。

答案 1 :(得分:1)

我想您可能想要使用firebug并查看(e)变量作为属性的内容。

在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;
    };