如何：将Div链接，但不链接其中的图像
[英]How to: Make a Div a link, but not the images within it
问题描述
Sorry for asking more questions about the same scenario but here goes: 
很抱歉询问有关同一场景的更多问题，但是这里有：
My text is great, the images are placed perfectly, however, I don't want to jquery slide method to run when the images are clicked (those are saved for other functions). 我的文字很棒，图像放置完美，但是，我不希望在单击图像时运行jquery slide方法（将其保存用于其他功能）。 Is it possible to make the slide function run only when the 'block' to the left of the images is clicked? 仅当单击图像左侧的“块”时，才可以使滑动功能运行吗？
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<body>
<div id="flip">
<div id="flipBox"><p>Click to slide the panel down or up</p></div>
<img class="ux" src="http://placekitten.com/32/32" alt="complete" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="add" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="edit" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="remove" height="32" width="32" align="right" />
</div>
<div id="panel">Hello world!</div>
</body>
Here's the jfiddle link: http://jsfiddle.net/rvAPk/ 这是jfiddle链接： http : //jsfiddle.net/rvAPk/
I'm very grateful for SO's pool of knowledgeable people! 我非常感谢SO的知识渊博的人！ Thanks guys! 多谢你们！
-AJ -AJ
3 个解决方案
解决方案1
2 已采纳 2014-03-20 03:22:38
You can use e.stopPropagation() : 您可以使用e.stopPropagation（） ：
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$("#flip img").click(function(e){
e.stopPropagation()
});
解决方案2
1 2014-03-20 03:30:18
Or you can try this: 或者，您可以尝试以下操作：
<script>
$(document).ready(function(){
$("#flip").click(function(e){
if(!($(e.target).is(".ux"))) {
$("#panel").slideToggle("slow");
}
});
});
</script>
I have experienced event.stopPropagation() not working for some reasons in my actual development in Android browsers that I resorted to the same approach as above, ie checking the event target. 在Android浏览器中的实际开发中，由于某些原因，我遇到了event.stopPropagation（）无法正常工作的问题，我采取了与上述相同的方法，即检查事件目标。
解决方案3
1 2014-03-20 03:32:19
following your example you can do like this... 按照您的示例，您可以这样做...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(e){
if($(e.target).prop("tagName") == 'IMG')
return false;
$("#panel").slideToggle("slow");
});
});
</script>
<body>
<div id="flip">
<div id="flipBox"><p>Click to slide the panel down or up</p></div>
<img class="ux" src="http://placekitten.com/32/32" alt="complete" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="add" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="edit" height="32" width="32" align="right" />
<img class="ux" src="http://placekitten.com/32/32" alt="remove" height="32" width="32" align="right" />
</div>
<div id="panel">Hello world!</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.