Question

I’ve made a page that uses jQuery to allow you to place <div>s on the page based on your mouse coordinates when you click.

The page

And here’s the javascript:

$('document').ready(function() {
    $("#canvas").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $(document.createElement('div')).css({'left':x + 'px', 'top':y + 'px'}).addClass('tile').appendTo('#canvas');
    });
});

I’ve found that if you mousedown in the div#canvas and mouseup with your pointer over a placed <div> (or vice versa) then a new <div> doesn’t get placed. Why is this?

EDIT:

Ok, so the problem is that the mouse-up and mouse-down events are registering in different elements so it doesn’t make a click event. So how do I get my mouse-up part of the click ignore the div.tile elements (the pink rectangles) and register in the div#canvas element to create the click event?

Answer 1

You need to handle mouseup instead of click.

EDIT: To ensure that the corresponding mousedown happened inside #canvas, yuo can handle it and check, like this:

var mousedownInCanvas = false;

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

$('#canvas').mousedown(function() {
    mousedownInCanvas = true;
}).mouseup(function(e) {
    if (!mousedownInCanvas) return;

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('<div class="tile"></div>').css({ left: x, top: y }).appendTo('#canvas');
});