[英]jQuery, click an element inside its clickable container - how to override
I have a list o elements li
that becomes my image carousel. 我有一个列表o元素li
成为我的图像轮播。 Each element is a thumbnail, and it becomes clickable using jQuery because i needed to put the image as li
background-image
. 每个元素都是一个缩略图,它可以使用jQuery点击,因为我需要将图像作为li
background-image
。 This I can not change. 这个我无法改变。 When thumb click, it calls a lightbox to show the image passed as bg parameter. 当拇指点击时,它会调用一个灯箱来显示作为bg参数传递的图像。
<ul id="piclist">
<li class="box" style="background-image: url('url_1');"><i class="seq" id="1"></i></li>
<li class="box" style="background-image: url('url_2');"></li>
<li class="box" style="background-image: url('url_3');"><i class="seq" id="2"></i></li>
<li class="box" style="background-image: url('url_4');"></li>
</lu>
The piece of my jQuery code to do this is: 我的jQuery代码是这样做的:
<script type="text/javascript">
$('.box').click(function() {
return $(this).ekkoLightbox();
});
</script>
IT WORKS! 有用! But in some special cases, the thumbnail must show a kind of button, so I used a positioned <i></i>
because of the Font Awesome im using in the project. 但在某些特殊情况下,缩略图必须显示一种按钮,因此我使用了定位的<i></i>
因为我在项目中使用了Font Awesome。
The image bellow can illustrate what im talking about: 下面的图片可以说明我在说什么:
THE PROBLEM IS: 问题是:
When the li
loads an i
element, it also must be clickable, and its link must override his parents link - the container. 当li
加载一个i
元素时,它也必须是可点击的,并且它的链接必须覆盖他的父元素链接 - 容器。
I did a piece of code in jQuery to do this, but always when I click on the i
element button, the action loads the image lightbox from the li
. 我在jQuery中做了一段代码来执行此操作,但是当我单击i
元素按钮时,操作会从li
加载图像灯箱。 Its wrong. 这是不对的。 It should do another action, for example, open an URL in new window, load another modal, whatelse. 它应该做另一个动作,例如,在新窗口中打开一个URL,加载另一个模式,whatelse。
<script type="text/javascript">
$('.box').click(function() {
return $(this).ekkoLightbox();
});
$('.seq').click(function() {
console.log($(this).attr("id")); //IT WORKS!
*do other action...* //Doesn´t work, open the <li> lightbox!
});
</script>
Any Help? 任何帮助? :) :)
Change the $('.seq') click to this: 将$('。seq')点击更改为:
$('.seq').click(function(ev) {
ev.stopPropagation();
console.log($(this).attr("id")); //IT WORKS!
*do other action...* //Doesn´t work, open the <li> lightbox!
});
This will prevent the click event from bubbling up an triggering the click even of the i's parent (the li). 这将阻止点击事件冒泡触发点击甚至是我的父母(li)。 Notice I added the event object as an argument and I'm calling the stopPropagation ( http://api.jquery.com/event.stoppropagation/ ) method before doing anything else. 注意我添加了事件对象作为参数,我在执行任何其他操作之前调用stopPropagation( http://api.jquery.com/event.stoppropagation/ )方法。
Check if e.target is identical to this: 检查e.target是否与此相同:
<script type="text/javascript">
$('.box').click(function(e) {
if( e.target !== this ) return;
return $(this).ekkoLightbox();
});
$('.seq').click(function() {
console.log($(this).attr("id")); //IT WORKS!
*do other action...*
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.