Prevent inner div from triggering outer-div events

Question

I created a basic row click-and-drag selection function. However the issue is click-and-dragging over the columns toggles them on and off. I am looking for some sort of return false or stopPropagation of some sort but I cannot get these to work.

return false does help by preventing text selection, but it does not prevent column selection from affecting row selection.

To demonstrate, http://jsfiddle.net/sjwcztre/ , try to select the rows from the right side - no problem. But try to select the rows where column text is present - it goes wonky

    var isMouseDown = false;

$('.row').each(function () {
    $(this).mousedown(function () {
        isMouseDown = true;
        rowClickHandler(this);
        console.log('mdown');
        return false;
    })
        .mouseover(function () {
        if (isMouseDown) rowClickHandler(this);
    });

    $(document).mouseup(function () {
        isMouseDown = false;
    });
});

function rowClickHandler(obj) {
    $(obj).toggleClass('highlight');
}

Answer 1

Check this , see if it works for you. Basically you need to create events for the children of your rows and handle them differently, adding a hoverChild control variable helped to prevent the hover from the parent activating once again.