Question

我有以下标记 -

<ul id="sliderNav">

<li class="navTitle"><h3>Navy Mobile App</h3>
    <p class="navContent"><br>New Navy mobile application to provide Navy information on-the-go. Is availble for download now.
   <br>
  <a class="sliderVV" href="/ftrStory.asp?issue=3&id=76319">View Story Download App</a></p>
</li>

<li class="navTitle"><h3>ALL HANDS MAGAZINE</h3>
   <p class="navContent"><br>What the Navy's Budget Means to you.<a class="sliderVV" href="xxxxxxxxxx">View Story</a></p>
</li>

<li class="navTitle"><h3>ALL HANDS UPDATE</h3>
    <p class="navContent"><br>Latest news from around the Fleet from the All Hands Update team.<br><br><a class="bannerLnk" href="xxxxxxxx" target="blank">For more visit  Midway site</a><a class="sliderVV" href="/viewVideo.asp">View Gallery</a></p>
</li>

<li class="navTitle"><h3>Photo Gallery</h3>
   <p class="navContent">Photo Gallery<a class="sliderVV" href="/viewPhoto.asp">View Photos</a></p>
</li>

和这个Javascript：

 var currSlide = 1;
 var totalSlides = 5;
 var autoPlay = true;
 var timepassed = 0;
 var duration = 4;


function autoRun (){

    if (window.timepassed == window.duration){
        window.timepassed = 0;
        if (window.currSlide == window.totalSlides){
          currSlide = 0;
        }
        if (autoPlay == true){
            $('#sliderNav .navTitle:nth-child(' (window.currSlide+1)+')').trigger('click');

        }
    }else{
     window.timepassed += 1;
    }


}

$(document).ready(function(evt){

    setInterval(autoRun, 1000);
    $('.navContent').hide();
    $('#sliderNav .navTitle').eq(0).addClass('selected');
    $('#multiSlides .slide').eq(0).show().addClass('active');
    $('.navContent').eq(0).slideDown(50).addClass('open');

    $('.navTitle').click(function(){

           var iconClicked = $(this).index();
           window.currSlide = iconClicked + 1;


        if ($(this).hasClass('selected')) {return false;
        } else {
             window.timepassed = 0;
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
            $('.active').removeClass('active').hide();
            $('#multiSlides .slide').eq(iconClicked).show().addClass('active');
            $('.open').slideUp(10).removeClass('open');
                   $('.navContent').eq(iconClicked).addClass('open').slideDown(200);

           };

    });

    $("#sliderContainer").hover(

        function () { autoPlay = false; },
        function () { autoPlay = true;
                timepassed = 0; 

        });

});

我的问题是列表项中的锚标记不起作用。我知道这是一个冒泡的问题，LI上的事件监听器阻止我的锚点击冒泡DOM，但我不知道如何解决它。

谢谢。

Answer 1

在我看来，你应该停止传播锚点击：

$('#sliderNav').find('a').click(function(e){
    e.stopPropagation();
});

这样就不会在LI级return false;级阻止锚点击行为。{/ p>

确实，与你的想法相反;）

Answer 2

它不太可能是您建议的问题，因为您通常必须致电event.stopPropagation以防止冒泡DOM

锚链接不会冒泡到文档，但链接可以通过右键单击打开

2 个答案: