折腾:
【未解决】给绘本查询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
这个就是所谓的:event bubbling 事件冒泡(上报)
好像是:
点击child,则不上报event给parent,好像就可以了?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事件
跳转新页面了:
【总结】
对于此处的:
...
Opposites and Contrasts
...