0

http://liveweave.com/iAEThw
http://jsbin.com/UXAhuki/1/edit

我在选择元素 div、文本和删除中有三个选项。

Here I state that when div is selected it calls the IntDraw function.

if ($(this).val() === 'div') {
    $('#divoptions').show();
    $('#spanoptions').hide();

    // No Background Option
    $('#nobg').click(function() {
        $('input[name=bgcolor]').val('none');
    });

    IntDraw();
    code.val(preview.html());
}

但是，当我选择任何其他选项时，我仍然可以绘制一个 div，这意味着该函数仍然被调用。

我尝试了我能想到的一切，但似乎无法解决这个问题。任何帮助是极大的赞赏。

这是绘图功能...

var enabled = true;

function IntDraw() {
    if(enabled === true) {
        setMousePosition = function(e) {
            var ev = e || window.event; //Moz || IE
            if (ev.pageX) { //Moz
                mouse.y = ev.pageY + window.pageYOffset;
                mouse.x = ev.pageX + window.pageXOffset;
            } else if (ev.clientX) { //IE
                mouse.y = ev.clientY + document.body.scrollTop;
                mouse.x = ev.clientX + document.body.scrollLeft;
            }
        }

        var mouse = {
            x: 0,
            y: 0,
            startX: 0,
            startY: 0
        };
        var element = null;

        canvas.onmousemove = function(e) {
            setMousePosition();
            if (element !== null) {
                var bcolor = $('input[name=bcolor]').val(),
                    bgcolor = $('input[name=bgcolor]').val(),
                    divborderstyle = $('#divborderstyle').val(),
                    divborder = $('#divborder').val();

                element.style.position = 'absolute';
                element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
                element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
                element.style.width = Math.abs(mouse.x - mouse.startX) + '%';
                element.style.height = Math.abs(mouse.y - mouse.startY) + '%';
                element.style.border = divborder + ' ' + divborderstyle + ' ' + bcolor;
                element.style.background = bgcolor;
                element.style.overflow = 'auto';
            }
        };

        canvas.onmousedown = function(e) {
            if (element !== null) {
                element = null;
                canvas.style.cursor = "default";
                console.log("finsihed.");
            } else {
                console.log("begun.");
                mouse.startY = mouse.y;
                mouse.startX = mouse.x;
                element = document.createElement('div');
                element.className = 'rect';
                element.style.top = mouse.y + '%';
                element.style.left = mouse.x + '%';
                canvas.appendChild(element);
                canvas.style.cursor = "crosshair";
            }
        };


        canvas.onmouseup = function(e) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
            code.val(preview.html());
        };
    }
    else {
        enabled = false;
    }
}
4

1 回答 1

1

当您没有选择 'div' 选项时，您需要返回鼠标事件。反过来，我的意思是当没有选择“div”选项时不要在画布上做任何事情。您可以通过检查您在每个鼠标事件中选择的选项来做到这一点

if ($('select#tools option:selected').val() !== 'div') return;

http://jsbin.com/UXAhuki/2/edit

于 2013-10-14T18:36:16.350 回答