0

我有一个 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 块点击事件。

我尝试了各种选项，但将 .service-info div 放在主 div 之外，但后来我得到了糟糕的用户体验。我已经尝试过使用 hover() 、mouseenter()、mouseenter()、mouseout() ，但效果不太好，不是我可以投入生产的东西。

有什么建议么？

谢谢。

4

3 回答 3

1

也许stopPropagation可能会有所帮助：

$(function() {

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

        alert('Red');
    });

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

        event.stopPropagation();

        alert('Blue');
    });

});

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

于 2013-08-28T12:17:14.213 回答
0

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

于 2013-08-28T11:42:53.290 回答
0

我会包装“？” 在带有标签的 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>
于 2013-08-28T12:22:32.553 回答