Question

说明：

我有以下HTML

<a href = "go some where">

<div onclick = "myfunc1(....)">CLICK ME A</div>

<div onclick = "myfunc2(....)">CLICK ME B</div>

</a>

现在，当我点击第一个div时，锚标签被触发同样的第二个div ..我希望能够点击锚标签内的任何div，它应该只调用分配给它的函数...... < / p>

当且仅当我没有点击任何div但是整个其他区域的锚标签然后它应该带我到页面href有...

我尝试了什么：

$(".add_this_person").on("click", "a", function (e) {
    e.preventDefault();
} ); // where add_this_person is a class of both divs

Answer 1

你可以试试这个： -
将class添加到两个div并更改jQuery代码，如下所示： -

$(".add_this_person").on("click", "a", function (e) {
  e.preventDefault();
  if($(e.target).is('.first'))
  {
     alert("A");
  }else if($(e.target).is('.second'))
  {
    alert("B");
  }else{
    window.location=$(this).attr('href');
  }
 });

Demo

Answer 2

你的尝试没问题，但你可以使用jQuery的全部潜力，而无需使用＆＃34; onclick＆＃34; div中的事件。只需分配一个类并创建一个类事件，该事件将触发给定类的所有元素，并将目标函数存储在一个额外的属性中......

只需将div标签与行动＆＃34; my-action＆＃34;并将目标函数存储在一个 HTML data-trunk＆＃34; function＆＃34;以函数名作为目标。

<div class="my-action" data-function="myAction1" >CLICK ME A</div>

<div class="my-action" data-function="myAction2">CLICK ME B</div>


<script type="text/javascript">
    $(document).ready(function() {

        //Declare your functions here, add them to window[] array...
        window.myAction1 = function() {
            alert("A");
        }

        window.myAction2 = function() {
            alert("B");
        }

        //This will trigger whenever an element with class "my-action" is clicked...
        $(document).on("click", ".my-action", function (e) {
            //Just read the function name from data-function and assign it from window[] array
            var targetFunction = window[$(this).data("function")];

            //And execute it, done!
            targetFunction();
        });
    });
</script>

创造了一个有效的小提琴...... http://jsfiddle.net/Lnnffcx5/

在div上的锚标记内单击时停止单击事件传播

2 个答案: