Question

很抱歉有关同一方案的更多问题，但请注意：

我的文字很棒，图片放置得很完美，但是，我不想在点击图像时运行jquery slide方法（这些图像是为其他功能保存的）。是否可以仅在单击图像左侧的“块”时运行滑动功能？

<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>

这是jfiddle链接：http://jsfiddle.net/rvAPk/

我非常感谢SO的知识渊博的人！谢谢你们！

-AJ

Answer 1

您可以使用 e.stopPropagation() ：

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

$("#flip img").click(function(e){
    e.stopPropagation()
});

<强> Updated Fiddle

Answer 2

或者你可以试试这个：

<script> 
$(document).ready(function(){
  $("#flip").click(function(e){
    if(!($(e.target).is(".ux"))) {
      $("#panel").slideToggle("slow");
    }
  });
});
</script>

我经历过event.stopPropagation（）在Android浏览器的实际开发中由于某些原因而无法工作，我采用了与上述相同的方法，即检查事件目标。

Answer 3

按照你的例子，你可以这样做......

<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>

如何：将Div设为链接，而不是其中的图像

3 个答案: