Question

如何与div元素中的所有图标分开？

基本上，在div中，我有4个要点击的东西。最后一个是链接整个div元素点击。中间元素用于特定图标点击。但现在，对于特定的图标点击，我希望点击次数可以连接到他们自己的链接。例如，如果单击github png，它应该转到github链接，但现在google div链接会覆盖它。无论我点击什么，我只连接到一个我不想要的链接。

由于

<script type="text/javascript">
    $(document).ready(function(){
        $(".Apps").click(function(){
            window.open($(this).find("a").last().attr("href"));
            return false;
        });                             
    });
</script>

    <div class="Apps">
        <p><b>Web Dev Project 3</b><br><i>(coming soon)</i></p>
        <a href="https://github.com/" target="blank">
        <img src="https://github.com/apple-touch-icon-114.png" width="30" height="30"/></a> 
        <a href="http://google.com" target="blank">
        <img id="logo" src="http://cclub.slc.engr.wisc.edu/images/Under-Construction.gif" width="30" height="30"/></a>
        <a href="http://google.com" target="blank"></a>
    </div>

Answer 1

实际上没有<a>与“包含元素”相关联的概念。而不是那样，为什么不抓住<div>上的“点击”事件并过滤出不在图标上的事件：

$('div.Apps').on("click", ":not(a img)", function() {
  window.location = "http://google.com";
});

标记的完成方式，很难说出屏幕区域如何不是容器内的图标，但可能是你有填充/边距或其他东西。

Answer 2

排除锚点：

$(".Apps").click(function(e){
    if (! $(e.target).closest('a').length ) {
        window.open($(this).find("a").last().attr("href"));
        return false;
    }
});

Answer 3

如果我是你，我会为div和a链接指定不同的id，然后在特定链接指令内部只是防止点击的默认行为;

$(´#aLinkId´).on(´click´, function(){
    event.preventDefault();
    event.stopPropagation();
    window.open(whatever here);
});

$(´#aDivId´).on(´click´, function(){
    window.open(other whatever here);
});

Answer 4

我这就是你要找的东西？

http://jsfiddle.net/gespinha/WPsbb/2/

   $(document).ready(function () {
       $(".Apps").click(function () {
           window.open($(this).find("a").last().attr("href"));
           return false;
       });
       $(".Apps > a").click(function () {
           window.open($(this).attr("href"));
           return false;
       });
   });

jQuery：div元素链接里面的其他链接

4 个答案: