在内部<a>链接</a>上单击时禁用div上的onclick事件<a>（无js框架）</a>

Question

我有这段代码：

<div id="mydiv" onclick="ajax_call()">
    <a href="http://myurl">Mylink</a>
</div>

我希望仅在单击div中的空白而不是“ Mylink”时才调用ajax_call（）。 没有任何外部javascript框架，有可能吗？

而且我有这条CSS：

div#mydiv:hover{
    background-color: blue;
}

将光标放在“ Mylink”上时是否可以禁用：hover样式表（以建议单击“ Mylink”不会触发ajax_call（）而是进入myurl）？

Answer 1

将函数附加到带有click事件的子元素上，在子元素上click后，其处理程序将停止立即传播，因此将不会调用ajax_call() 。

的HTML

<div id="mydiv" onclick="ajax_call()">
    <a href="http://myurl" onclick="notCall(event)">Mylink</a>
</div>

Java脚本

function ajax_call(){
    alert("empt space");
}

//this function stops the propagation and not triggered above
//function when clicked on child element.
function notCall(event) {
    event.stopImmediatePropagation();
    return false;
}

演示

Answer 2

我不确定您想要什么，但如果我保持想象力，可能是这项工作，很幸运！

$("div#mydiv a").hover(function(){
    $(this).parent().css("background-color","transparent")
})

Answer 3

当然，您需要的是事件target || scrElement

喜欢

  function ajax_call() {

    var target = event.target ? event.target : event.srcElement;

    if(target.id==="mydiv") { alert("good to go"); }

  }

参见：http://jsbin.com/qujuxufo/1/edit

---

编辑/更新（错过了第二部分） -在q关闭之前开始回答此问题-但现在可能还不错。

对于问题的第二部分-无法在CSS中设置父元素（它从上到下流动）-因为需要更多的JS。

参见http://jsbin.com/cileqipi/1/edit CSS

#mydiv:hover { background-color:green; color:#fff}
#mydiv.anchorhover, #mydiv.anchorhover:hover { background-color:white;}

然后JS

  var _mydiv =  document.getElementById("mydiv");
  var _mydiv_anchors = _mydiv.getElementsByTagName("a");

  function toggleClass() {
    var addClass=true, cls="anchorhover";
    if((_mydiv.className).indexOf(cls) >= 0){ addClass=false; }
    if(addClass) {
      _mydiv.className=_mydiv.className+=' '+cls;
    } else {
      /* remove */
      _mydiv.className=_mydiv.className.replace(new RegExp('(\\s|^)'+cls+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
    }
  }

  for(var i=0, len=_mydiv_anchors.length; i<len; ++i) {
    _mydiv_anchors[i].onmouseover = toggleClass; 
    _mydiv_anchors[i].onmouseout = toggleClass; 
  }

^与简单的jquery抽象它相比..>

$("#mydiv a").hover(function() {
   $(this).parent().addClass("anchorhover");
}, function() {
    $(this).parent().removeClass("anchorhover");
});

---

无论哪种方式，原理都是：在mouseover上向父元素添加样式类，并在mouseout上将其删除