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事件附加子元素的函数，单击子元素后，它的处理程序会停止立即传播，因此不会调用ajax_call()。

<强> HTML

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

<强>的javaScript

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

DEMO

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"); }

  }

See : http://jsbin.com/qujuxufo/1/edit

编辑/更新（错过第二部分） - 在q关闭之前开始回答这个问题 - 但现在可能就好了..

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

See 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抽象相比，感觉就像一次旅行..＆gt;

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

无论哪种方式，原则是：在鼠标悬停时向父元素添加样式类，并在mouseout上删除它

在<a> link (No js framework)</a>内单击时禁用div上的onclick事件

3 个答案: