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

如何使用prototype的observe注册div中的每个单击

prototypejs html javascript

Maleki · 技术社区 · 15 年前

我试图创建一个简单的应用程序,需要隐藏和显示div的内容点击。这很好,除了我每次单击一个跨度或列表时,div都不会看到单击。观察这个div中所有点击的最佳方法是什么?

 <div data-hour="16" data-minute="0" data-duration="1" class="even">
          <span class="title" >block:</span> <span>4:00PM</span>
            <div>
                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                </ul>
            </div>
        </div>


$$('#contents >  div').each(function(item) {
        item.observe('click', respondToClick);
    });

1 回复 | 直到 14 年前

T.J. Crowder 15 年前

除非您通过span或列表上的处理程序捕捉并抑制单击,否则上面的代码应该可以工作,并且在这里可以工作: http://jsbin.com/etuka3 (即 observe 代码可以缩短,但是,通过 invoke : http://jsbin.com/etuka3/2 ).

如我所知,大多数DOM事件从一个元素“冒泡”到它的父元素它的父元素等,除非冒泡被链中某个事件处理程序取消。例如,在 this version 在上面,我勾住 click 上 li 并防止事件到达 div :

$$('#contents > div li').invoke('observe', 'click', function(event) {
    event.stopPropagation(); // Prevents the event from bubbling up to the ancestors
});

……这意味着点击 锂 ,和 分区 看不到咔嗒声。但您必须故意这样做,仅将事件挂接到子元素上就可以了不防止冒泡,如你所见 this example :

$$('#contents > div li').invoke('observe', 'click', function(event) {
    display("list item clicked");
});

现在当我点击 锂 ,我们可以看到 锂 的处理程序被触发,然后(因为我没有停止冒泡) 分区 的处理程序被触发。

推荐文章

user1240207 · 提交时原型JS覆盖数据

10 年前

madhamster · 为什么PrototypeJS类实例共享相同的属性?[副本]

10 年前

MeetJoeBlack · 无效的JSON格式JQUERY

12 年前

Arthur Yakovlev · 如何通过原型上的类名获取div的html

12 年前

Syspect · IE中未触发Event.observe

12 年前

Morrisda · 在对象中找不到键时,返回不同的值而不是未定义的值

12 年前

Mathi Maheswaran · Prototype.js返回className,而不是ie9中的类

12 年前

Damon · 使用Prototype更新表内容时出错

14 年前