2013-10-14 72 views
0

http://liveweave.com/iAEThw
http://jsbin.com/UXAhuki/1/edit呼叫功能在單選項

我有一個選擇元素DIV三個選項,文本和刪除。

我在這裏聲明,在選擇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; 
    } 
} 
+2

你會需要一個函數把抽出做到這一點。 – tymeJV

+0

我試着做啓用=假使用if else語句並調用,但也不能工作。 –

+0

,你能告訴我們你是從 –

回答

1

您需要返回的鼠標事件時,你沒有選擇的「格」選項。和回報,我的意思是當沒有選擇「格」選項,在畫布上沒有做任何事情。您可以通過檢查你在每個鼠標事件選擇的選項與

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

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