我只想单击一个div而不单击div中的链接

Question

请尝试不单击链接就单击div（标记）。 我已经将链接设置为jquery cdn，但是当我单击它时，我只希望div（外部）显示出显示块而不转到该链接。 我的代码如下。 当我单击右下角的圆圈时。 它将在父div的中心显示一个大标记。 但是，那是去我不想要的链接。

 $(".news-box").click(function() { window.location = $(this).find("a").attr("href"); return false; }); $(".news-box").mouseenter(function() { $(".circle").css("display", "block"); }).mouseleave(function() { $(".circle").css("display", "none"); }); $(".circle").on("click", function() { $(".outer").css("display", "block"); }); 

 img { width: 100px; height: 94px; text-align: center; vertical-align: top; position: relative; top: 7px; left: 10px; } .news-box { width: 350px; height: 100px; border: 3px solid red; position: relative; } .img-box { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; } .news-descript { margin-top: 15px; } a { position: absolute; top: 0; left: 0; z-index: 1; bottom: 0; right: 0; cursor: pointer; } a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; } .circle { width: 22px; height: 22px; background-color: rgba(13, 16, 18, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 1s linear; position: absolute; bottom: 0; right: 0; z-index: 4; display: none; } .circle:hover { background-color: rgba(13, 16, 18, 1.0); } .mark { border-right: 3px solid white; border-bottom: 3px solid white; transform: rotate(45deg); background-color: transparent; width: 7px; height: 15px; position: relative; left: 6px; top: 2px; } .black { width: 350px; height: 100px; background: rgba(0, 0, 0, 0.5); } .big-mark { border-right: 5px solid white; border-bottom: 5px solid white; transform: rotate(45deg); width: 30px; height: 90px; margin: auto; } .outer { top: -3px; right: -3px; position: absolute; z-index: 3; display: none; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="news-box"> <a href="https://code.jquery.com/"></a> <div class="circle"> <div class="mark"></div> </div> <div class="outer"> <div class="black"> <div class="big-mark"> </div> </div> </div> <div class="inside"> <div class="row"> <div class="col-xs-4 position one"> <div class="img-box"> <img src="https://preview.ibb.co/gJaSjx/timi_small.jpg"> </div> </div> <div class="col-xs-8"> <div class="news-descript"> <p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div> </div> 

Answer 1

快速解决方案：将e参数传递给事件侦听器，以便可以在其上调用preventDefault方法。

如果不使用链接，为什么不删除它呢？

 $(".news-box").click(function(e) { e.preventDefault(); }); $(".news-box").mouseenter(function() { $(".circle").css("display", "block"); }).mouseleave(function() { $(".circle").css("display", "none"); }); $(".circle").on("click", function() { $(".outer").css("display", "block"); }); 

  img { width: 100px; height: 94px; text-align: center; vertical-align: top; position: relative; top: 7px; left: 10px; } .news-box { width: 350px; height: 100px; border: 3px solid red; position: relative; } .img-box { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; } .news-descript { margin-top: 15px; } a { position: absolute; top:0; left:0; z-index: 1; bottom: 0; right:0; cursor: pointer; } a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; } .circle { width: 22px; height: 22px; background-color: rgba(13, 16, 18, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 1s linear; position: absolute; bottom:0; right:0; z-index: 4; display: none; } .circle:hover { background-color: rgba(13, 16, 18, 1.0); } .mark { border-right: 3px solid white; border-bottom: 3px solid white; transform: rotate(45deg); background-color: transparent; width: 7px; height: 15px; position: relative; left: 6px; top: 2px; } .black { width: 350px; height: 100px; background: rgba(0, 0, 0, 0.5); } .big-mark { border-right: 5px solid white; border-bottom: 5px solid white; transform: rotate(45deg); width: 30px; height: 90px; margin: auto; } .outer { top: -3px; right: -3px; position: absolute; z-index: 3; display: none; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="news-box"> <a href="https://code.jquery.com/"></a> <div class="circle"> <div class="mark"></div> </div> <div class="outer"> <div class="black"> <div class="big-mark"> </div> </div> </div> <div class="inside"> <div class="row"> <div class="col-xs-4 position one"> <div class="img-box"> <img src="https://preview.ibb.co/gJaSjx/timi_small.jpg" > </div> </div> <div class="col-xs-8"> <div class="news-descript"> <p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div> </div> 

Answer 2

您完全不必仅使用<a>进行参考。

JS

$(".news-box").click(function() {
      window.location = $(this).attr("data-href"); 
      return false;    
});

的HTML

<div class="news-box" data-href="https://code.jquery.com/">

Answer 3

删除这个 在您的代码上。 这是因为在页面刷新后会触发链接 。 我删除了链接，一切正常。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-box">
        <div class="circle">
            <div class="mark"></div>
        </div>
        <div class="outer">
            <div class="black">
                <div class="big-mark">

                </div>
            </div>
        </div>
        <div class="inside"> 
            <div class="row">
                <div class="col-xs-4 position one">
                    <div class="img-box">
                        <img  src="https://preview.ibb.co/gJaSjx/timi_small.jpg" >
                    </div>
                </div>
                <div class="col-xs-8">
                    <div class="news-descript">
                        <p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>  
                </div>
            </div>  
        </div>
    </div>