5

私は次のマークアップを持っています：

<div class="parent">
  I should change my color to green when clicked
  <div class="element">I should do nothing when clicked</div>
</div>

関連するCSSは次のとおりです。

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;
}
.parent:active {
  background:green;
}
.element {
  background:blue;
}

クリックされたときに.parentの:active疑似クラスがトリガーされないようにする方法はありますか？運が悪かったときにクリックされ たときに.element試してみました。デモe.stopPropogation().element

4

4 に答える 4

2

このデモ（リンク）:activeのように、の代わりにjQueryを使用できます。

$('.element').mousedown(function(e){
  e.stopPropagation();
});

$('.parent').mousedown(function(e){
  $('.parent').css('background', 'green')
    }).mouseup(function(e){
  $('.parent').css('background', 'red')
});
于 2013-03-20T12:42:37.917 に答える
1

親に追加のクラスを導入するのはどうですか？allow-active

<div class="parent allow-active">

次に、cssを修正して次のよう.parent:activeにします

.parent.allow-active:active {
    background:green;
}

parentdivにクラスとallow-activeクラスの両方がある場合にのみ色が変わることを意味します

次に、allow-activeクラスを切り替えるためのjQueryを少し追加します

$('.element').mousedown(function(e){
    $('.parent').removeClass('allow-active');
}).mouseup(function(e){
    $('.parent').addClass('allow-active');
});
于 2013-03-20T12:55:51.667 に答える
0

jsで可能

$(document).ready(function(){
    $(".parent").click(function(){
$(this).css("background","green")
    });
   $(".parent .element").click(function(e) {
       return false;
   });
});

とcss

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;

}
.parent:active {

}
.element {
  background:blue;

}

HTMLは同じです

于 2013-03-20T12:49:29.257 に答える
0

Doorknobの代替ソリューションは、event.target：を使用することです。

$('.parent').mousedown(function(e){
    if ($(e.target).is(this))
        $('.parent').css('background', 'green');
}).mouseup(function(e){
    if ($(e.target).is(this))
        $('.parent').css('background', 'red');
});

デモ。

于 2013-03-20T12:54:23.680 に答える