Question

我有一个div，它有一个可点击的事件。

<div id="economy" class="service-block" title="Economy" data-price="79.09">
  <h3>Economy </h3>
  <span class="service-price">R79.09</span>
  <div class="selected-service"></div>
  <div class="service-info" title="economy">?</div>
</div>

它还有悬停效果

$(function () {
    $('.service-block').hover(

    function () {
        $(this).animate({
            backgroundColor: '#258dd4'
        }, 250);
        var tron = $(this).attr('id');
        $('#' + tron + ' .service-info').show(50);
        $('#' + tron + ' h3').css('color', '#303030');
    },

    function () {
        $(this).animate({
            backgroundColor: 'rgba(37, 140, 212,0.2)',
        }, 250);
        var tron = $(this).attr('id');
        $('.service-info').hide(50);
        $('#' + tron + ' h3').css('color', '#fff');
    });
});

悬停效果显示.service-info这是一个小“？” div块。我希望该元素也有可点击的事件。但是当我点击“？” div块它作用于主div点击事件和“？” div阻止点击事件。

我尝试了各种选项，但是在主要div之外使用了.service-info div，但后来我得到了糟糕的用户体验。我已经尝试过hover（），mouseenter（），mouseenter（），mouseout（），但它不能很好地工作，而不是我可以投入生产的东西。

有什么建议吗？

感谢。

Answer 1

也许stopPropagation可能会有所帮助：

$(function() {

    $('#foo').click(function(event) {

        alert('Red');
    });

    $('#foo > div').click(function(event) {

        event.stopPropagation();

        alert('Blue');
    });

});

http://jsfiddle.net/coma/zmahz/

Answer 2

我认为你可以使用超链接而不是div块来表示“？”，并使用它的点击事件：

Answer 3

我会把“？”包起来在带有标记的div内，然后为此标记分配onclick事件。这应避免碰撞。

考虑：

<div id="economy" class="service-block" title="Economy" data-price="79.09">
<h3>Economy </h3>
<span class="service-price">R79.09</span>
<div class="selected-service"></div>
<div class="service-info" title="economy"><a href='#' onclick='function()'>?</a></div>
</div>
<script type='text/javascript'>
function()
{
// do something
}
</script>

Jquery悬停效果，主要可点击元素中包含可点击元素

3 个答案: