拜托,我试图在不单击链接的情况下单击 div(mark)。我已经设置了指向 jquery cdn 的链接,但是当我单击它时,我只希望 div(外部)显示以显示 block 而不转到链接。我的代码如下。当我点击右下角的圆圈时。它会在父 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>
最佳答案
快速修复:
将 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>
关于javascript - 我只想点击一个div而不点击div中的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49755001/