web-dev-qa-db-ja.com

:: afterや:: beforeなどのCSS擬似要素のイベントリスナー

CSS擬似要素::beforeを持つdiv要素があり、（実際のボタンを使用する代わりに）閉じるボタンとして使用されています。擬似要素にonlyイベントリスナーを適用するにはどうすればよいですか？

[〜＃〜] html [〜＃〜]

<div id="box"></div>

[〜＃〜] css [〜＃〜]

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}
javascriptcsspseudo-element
34
jenswirf

いいえ。擬似要素はDOMに存在しないため、それを表すHTMLElementNodeオブジェクトはありません。

34
Quentin

解決策を探していて、このスレッドを見つけました。今、私のソリューションを共有したい：

[〜＃〜] css [〜＃〜]

element { pointer-events: none; }
element::after { pointer-events: all; }

[〜＃〜] js [〜＃〜]

element.addEventListener('click', function() { ... });

これは、elementでポインターイベントが必要ない場合に機能します。 action で確認してください。

29
p.boiko

JQueryには：beforeおよび：afterセレクターはありません。ただし、別の方法として、クリックイベントの場所を確認し、擬似要素にあるかどうかを確認できます。

（私はこれをテストしていません）

スタイル：

#mything {
    width: 100px;
    height: 100px;
    position: relative;
    background: blue;
}
#mything:after {
    content: "x";
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 10px;
    height: 10px;
}

javascript：

$('#mything').click(function(e) {
    if (e.clientX > $(this).offset().left + 90 &&
        e.clientY < $(this).offset().top + 10) {
        // do something
    }
});

html：

<div id="mything">Foo</div>
12
Benjamin Intal

生成されたコンテンツの位置と寸法がわかっている場合は、要素自体にクリックハンドラーを追加し、処理する前に 相対マウス位置 を確認できます。

これは曲解ですが、可能です。

2
Yuri Sulyma

他の人が示すように、一般的にノー。 ただし、擬似要素を含むタグが空の場合、たとえば、 ブートストラップのグリフィコン 。

divまたはspan、またはケースに適したタグをラップできます。 ブートストラップのグリフィコン は:beforeを使用しますが、ページではhoverイベントがキャッチされていることがわかります。

例：

<span>
  <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
</span>

上記のグリフィコンにイベントを追加する場合、 jquery parent selector を使用できます

$('glyphicon').parent('span').click(function() { 
  // awesome things
});

タグが空の場合のちょっとしたトリック。

0
gongzhitaao