disable onclick event on div when clicking on inside <a> link (No js framework)

Question

I have this piece of code:

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

I'd like ajax_call() to be called only when clicking on empty space inside div but not on "Mylink". Is it possible without any external javascript framework?

Moreover I have this piece of css:

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

Is it possible to disable the :hover stylesheet when the cursor is placed over "Mylink" (in order to suggest that clicking on "Mylink" won't trigger ajax_call() but will take to myurl)?

Answer 1

Attach the function at child element with click event, After clicked on child element it's handler stops the immediate propagation, As a result ajax_call() will not be invoked.

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

I'm not sure what you want but if I keep my imagination may be that this work, lucky !

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

Answer 3

Sure, what you need is the event target || scrElement

Like

  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

---

Edit/Update ( missed the second part ) - Started to answer this before the q was closed - but might as well as it now ..

For the second part of the question - it is not possible to set parent elements in CSS ( it flows top to bottom ) - for that some more JS is needed.

See http://jsbin.com/cileqipi/1/edit CSS

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

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

^ That feels like quite a trip compared to how simple jquery abstracts it .. >

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

---

Either way, the principle is : to add a style class to the parent element on mouseover and remove it on mouseout