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

折腾：

【未解决】给绘本查询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

...