javascript - 单击提交输入时如何防止 Accordion 切换？

Question

当我点击一个提交 POST 表单的图标时，我不知道如何防止 accordion 的默认行为。

<tr data-toggle="collapse" data-target="#record_309" class="accordion-toggle even">

                            <td>
                            </td>
                            ...
                            <td class="action">                                      
<div class="col-lg-12">
    <form class="col-lg-3" action="/dashboard/settings/" method="get">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" onclick="preventAccordion(event);" src="/static/icons/alarm-1.png">
    </form>
    <form class="col-lg-3" action="/products/reset/" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="<CSRFTOKEN>">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" src="/static/icons/restart.png">
    </form>    
</div>        
</td>        
</tr>

如您所见，在最后一列的第一种形式中，我试图调用 preventAccordion(e) 函数来防止显示 Accordion 。问题是 preventDefault(event) 阻止了表单提交。

<script>
        window.preventAccordion = function(e) {
            e.preventDefault();
        }
</script>

你知道当用户点击这个图标时如何防止 Accordion 切换吗？

Answer 1

改用e.stopPropagation()。

Note that this will not prevent other handlers on the same element from running. http://api.jquery.com/event.stopPropagation

示例:http://jsfiddle.net/1o78c2os/2/