javascript - 给匿名元素添加伪元素和光标样式和事件监听器

Question

我在 toolbarbutton xul 元素中有这个匿名元素。这是一个 xul:image。我想给它一个伪元素(:before, :after)。在悬停时，我想给它 cursor:pointer 样式。我也想 addEventListener('click', ...) 它。然而，这些都不起作用。

我什至修改了 XBL 以注入(inject)我自己的堆栈元素，然后在堆栈元素上尝试这个东西，但它不起作用。

检查匿名元素 DOM Inspector 插件。 (我试图在这个元素上设置点并给它一个伪元素并给它 onMouseDown 功能)

Answer 1

看起来不像是这些嵌套的、匿名的xul:image节点完全支持 ( ::before) 伪元素。或者可能是因为 toolbarbutton绑定(bind)是 display="xul:button" ...在布局引擎深处的某个地方，父元素完全拒绝采用生成的 ::before伪元素，我的调试器说。请记住 XUL != HTML .

但是，您可以将内容绑定(bind)和/或重新绑定(bind)到新绑定(bind)。

我使用此 CSS 重新绑定(bind)同步按钮并为其设置样式(类似于问题评论中的示例，但并不意味着像素完美再现):

#PanelUI-fxa-status {
  -moz-binding: url(toolbarbutton.xml#toolbarbutton);
}
#PanelUI-fxa-status .toolbarbutton-badge {
  list-style-image: url(chrome://browser/skin/places/query.png);
  transform: translate(8px,8px) scale(0.7);
  border: 1px solid red;
}

以及基于默认绑定(bind)的新绑定(bind):

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<bindings
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="toolbarbutton" display="xul:button" role="xul:toolbarbutton"
           extends="chrome://global/content/bindings/button.xml#button-base">
    <resources>
      <stylesheet src="chrome://global/skin/toolbarbutton.css"/>
    </resources>

    <content>
      <children includes="observes|template|menupopup|panel|tooltip"/>
      <xul:stack>
        <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=bage,label"/>
        <xul:image class="toolbarbutton-badge" xbl:inherits="validate,src=image,label"/>
      </xul:stack>
      <xul:label class="toolbarbutton-text" crop="right" flex="1"
                 xbl:inherits="value=label,accesskey,crop,wrap"/>
      <xul:label class="toolbarbutton-multiline-text" flex="1"
                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
    </content>
  </binding>
</bindings>

您可以像我一样使用 CSS 设置徽章，也可以使用 <toolbarbutton ... badge="{url}"/> (即绑定(bind)中的 src=badge 继承)。

关于 addEventListener/cursor stuff:这里不太清楚你到底要求什么？

您可以对工具栏按钮( addEventListener 、 command=/oncommand= ……)使用所有常用方法，但不能对它的子元素使用。

您可以使用 cursor:样式与 toolbarbutton ，但不包括它的子元素。

两者都归因于 display="xul:button"在绑定(bind)中。如果你不想那样，你需要修改绑定(bind)不使用 display=并修复任何损坏的东西。