最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】html中外部大区域父元素和内部小区域子元素同时支持点击事件

点击 crifan 38浏览 0评论
折腾:
【未解决】给绘本查询web版增加点击tag标签搜索
期间,遇到一个问题,对于html页面:
对于某个tag:
去加上了click事件的支持:
    function tagClickCallback(event){
        console.log("tagClickCallback: event=%o", event)
        console.log("this=%o", this)

        var clickedTagStr = $(this).text()
        console.log("clickedTagStr=%s", clickedTagStr)
    }
    $(document).on("click", ".book_list_single_tag", tagClickCallback)
但是调试才发现,想起来:
之前对于此tag所处于的父级元素,整个div,原先也是已经支持了点击事件的:
    function saveInputAndRedirect(event){
        console.log("saveInputAndRedirect: event=%o", event)
        console.log("this=%o", this)

        var curInput = $("#inputQuery").val()
        console.log("curInput=%s", curInput)
        event.data = {
            "curInput": curInput,
            "curElement": this,
        }
        console.log("event.data=%o", event.data)
        // redirectToDetailPage.bind(this)
        redirectToDetailPage(event)
    }
    $(document).on("click", ".single_storybook_item", saveInputAndRedirect)
所以此时点击tag时,其实只有父级元素响应了click,导致内部元素tag没法响应click了。
希望:
对于外层,父级区域的元素,支持click点击,响应事件
同时,如果只是点击了tag所属区域,则响应tag的click的事件
html parent and child booth click
html parent child  click
javascript – Child element click event trigger the parent click event – Stack Overflow
这个就是所谓的:event bubbling 事件冒泡(上报)
好像是:
点击child,则不上报event给parent,好像就可以了?
javascript – What is event bubbling and capturing? – Stack Overflow
Event capturing
When you use event capturing
               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------
the event handler of element1 fires first, the event handler of element2 fires last.
Event bubbling
When you use event bubbling
               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------
the event handler of element2 fires first, the event handler of element1 fires last.
试试:
event.stopPropagation()
给parent的single_storybook_item加上试试:
    function saveInputAndRedirect(event){
        event.stopPropagation()
。。。
    }
    $(document).on("click", ".single_storybook_item", saveInputAndRedirect)
结果问题依旧:
点击了tag还是跳转到详情页
感觉错了?应该加到child的元素上?
去试试
    function tagClickCallback(event){
        event.stopPropagation()
...
    }
    $(document).on("click", ".book_list_single_tag", tagClickCallback)
结果:
是对的:
再去去掉parent中的event.stopPropagation,也是同样的正确的效果:
点击child区域,响应child的click事件:
点击parent的区域,响应parent的click事件
跳转新页面了:
【总结】
对于此处的:
<li class="list-group-item single_storybook_item">
...
        <div class="media-body">
            <p class="book_list_tags" data-difficulty="20">
              <span class="badge badge-pill badge-secondary book_list_single_tag">Opposites and Contrasts</span>
              ...
            </p>
        </div>
    </div>
</li>
parent是li的single_storybook_item
child是span的book_list_single_tag
各自都有click的event
希望实现:
click点击child的book_list_single_tag,只响应child的event,不触发parent的event
点击parent的single_storybook_item,正常响应parent的event
具体做法是:
只需要去child的click的event中,加上:
event.stopPropagation()
比如:
    function tagClickCallback(event){
        event.stopPropagation()
...
    }
    $(document).on("click", ".book_list_single_tag", tagClickCallback)
即可。

转载请注明:在路上 » 【已解决】html中外部大区域父元素和内部小区域子元素同时支持点击事件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.075 seconds, using 9.31MB memory