Question

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

我在select元素div，text和remove中有三个选项。

这里我说明当选择div时，它会调用IntDraw函数。

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

Answer 1

如果未选择“div”选项，则需要返回鼠标事件。通过返回，我的意思是当没有选择'div'选项时，不要在画布上做任何事情。您可以通过使用

检查在每个鼠标事件中选择的选项来执行此操作

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

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

仅在单一选项上调用功能

1 个答案: