【问题标题】:jQuery /deep/ delegationjQuery /deep/ 委托
【发布时间】:2015-02-25 21:57:32
【问题描述】:

使用 webcomponents,您可以使用 /deep/ 定位 shadowdom 的内部元素,在我尝试使用事件委托之前,它可以正常工作。

常规点击功能将起作用:

$('html /deep/ a').on('click', function(e) {
  e.preventDefault()
  console.log('foo')
})

委托似乎没有效果:

$('html').on('click', '/deep/ a', function(e) {
  e.preventDefault()
  console.log('bar')
})

知道在这里做什么吗?

【问题讨论】:

  • 我认为事件不会从 Web 组件中冒出(至少默认情况下),因此委派无法工作。
  • 没试过,但我猜这些元素会冒泡到ShadowRoot,而且没有更多,所以将处理程序附加到<html> 可能没用。
  • 好问题,@daryl
  • 不能在聚合物元素本身内部添加点击处理程序吗?
  • @Todd 我认为$(document)$("html") 几乎相同,至少在这种情况下是这样。如果事件没有冒泡到一个,它们就不会冒泡到另一个。

标签: javascript jquery web-component shadow-dom


【解决方案1】:

Shadow DOM 重新定位事件,使它们看起来来自宿主元素。这是为了保留封装模型(否则您可能会抓住目标并在组件内乱扔垃圾)。

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-events

也许您可以尝试委托给宿主元素,然后使用event.path 来确定是否点击了a

【讨论】:

    猜你喜欢
    • 2013-01-18
    • 1970-01-01
    • 1970-01-01
    • 2012-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-27
    相关资源
    最近更新 更多