17

:before疑似要素（以下にリンクしているJSfiddleのdivのオレンジ色の部分）のクリックを有効にする方法を知りたいです。疑似要素はDOMにないため、これをハックする必要があることを読みました。残念ながら、実際に動作するコードを示す既存のStackoverflow Q＆Aが見つかりません。

リンク： http： //jsfiddle.net/Vv6Eb/4/

HTML：

<div></div>

CSS：

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left; 
}

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}
4

5 に答える 5

16

円が「あるべき」場所がわかっている場合は、三角法を使用して、クリックが円内にあるかどうかを確認できます：http: //jsfiddle.net/Vv6Eb/19/

$("div").click(function(e){
    var $me = $(this),
        width = $me.outerWidth(),
        height = $me.outerHeight(),
        top = $me.position().top,
        left = $me.position().left;

    var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));

    if (len < 10)
        alert('ding');
});​
于 2012-10-02T15:07:59.597 に答える
13

これの回避策は、アイテムに動的にを追加<span>し、それにクリックメソッドを割り当てることです。このフィドルのように。

var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);

CSS

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left;
}

div span { content:""; display:block;
    padding:5px; background-color:#f60; border:2px solid white;
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
于 2012-10-02T15:00:52.397 に答える
2

：beforeを使用しようとしていることは知っていますが、この状況では、フックとして使用するクラスを使用して新しいdivを作成し、それを元のdivに追加することはできませんか？

このようなものが機能する可能性があります：

var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);

そしてCSS：

.parentDivToOrangeCircle { position:relative; background-color:#333;
    padding:20px; margin:20px; float:left; 
}

.orangeCircle {
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}
于 2012-10-02T14:58:48.567 に答える
1

jqueryを使用するのが好きです

  $(document).on("click", "span", function(e){
         if (e.offsetX > $(this)[0].offsetWidth) {
               alert('clicked on after');
    } 
    else
    {
    alert('clicked on main span');
    }
        
    })
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>

于 2018-10-09T09:48:38.930 に答える
0

私の目的は、子DIVを追加するだけの別の回避策によって解決されました。親内のすべての子要素をこの新しい子DIVにまとめます。

問題の説明と同じ私の作業サンプル：Fiddleを参照してください

HTML：

<div class="parentDiv">
    :before
    <div class="childDiv">
        <!-- child elements -->
    </div>
</div>

**注：:before理解するために表示するだけで、HTMLのを無視してください。

CSS： 

div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}

div.childDiv{padding:20px; margin:0}

jQuery：

jQuery(document).ready(function($){
    $('div.parentDiv').click(function(e){
        if( $(e.target).closest('.childDiv').length==0 ){
            //so clicked on psudo :before element!
            //do your work here ;)
            alert('Psudo :before element is clicked!');
        }
    });
});
于 2018-07-04T14:55:36.500 に答える