[英]Clickable div except for links and buttons
On my web app, I have a div that hides when clicked. 在我的Web应用程序上,单击时隐藏了一个div。 Then a new div (video) appears.
然后出现一个新的div(视频)。 My problem is that I have an upvote button and a link in the first div, but if you click those, the div hides and pops up the video instead of the wanted functionality.
我的问题是我在第一个div中有一个upvote按钮和一个链接,但是如果单击它们,该div将隐藏并弹出视频,而不是所需的功能。
How can I have it so if they click the button or the link, it doesn't hide the first div and show the video? 我该怎么办,如果他们单击按钮或链接,它不会隐藏第一个div并显示视频?
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function () {
$('.videoDiv').show();
$('.firstDiv').hide();
});
});
</script>
First Div: 第一师:
<div class="panel-body firstDiv">
<div class="col-xs-7 col-sm-8 col-md-7">
<a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="btn-group-vertical pull-right" role="group">
<a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
</div>
</div>
Video Div: 视频分区:
<div class="panel-body videoDiv">
<div class="video-js-box">
<video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}">
</video>
</div>
</div>
Exclude events for link /upvote button that is, apply click function on div
and check it is not on .btn
only then execute your statements. 排除链接/ upvote按钮的事件,即在
div
上应用click函数,并检查它是否不在.btn
然后执行您的语句。 Also, you need to check if target is not child of .btn
另外,您需要检查目标是否不是
.btn
子.btn
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function (e) {
if (!$(".btn").is(e.target) //not clicked on .btn
&& $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn
{
$('.videoDiv').show();
$('.firstDiv').hide();
}
});
});
</script>
Try utilizing .is()
, calling .show()
, .hide()
if e.target
does not have btn
class
尝试利用
.is()
调用.show()
.hide()
如果e.target
没有btn
class
$(function () {
$(".videoDiv").hide();
$(".firstDiv").on('click', function (e) {
if (!$(e.target).is(".btn")) {
$(".videoDiv").show();
$(".firstDiv").hide();
};
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.