Jquery Hover 效果与主可点击元素内的可点击元素答案

【问题标题】：Jquery Hover effect with clickable element inside the main clickable elementJquery Hover 效果与主可点击元素内的可点击元素
【发布时间】：2013-08-28 10:14:22
【问题描述】：

我有一个具有可点击事件的 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() 试过了，但效果不太好，我不能投入生产。

有什么建议吗？

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

也许stopPropagation 可能会有所帮助：

$(function() {

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

        alert('Red');
    });

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

        event.stopPropagation();

        alert('Blue');
    });

});

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

【讨论】：

完美！谢谢@coma

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：