繪製DOM元素：鼠標事件被背景元素弄糊塗

Question

我正在構建一個DOM繪圖應用程序。這些小提琴的是相同的：

http://jsfiddle.net/tomsoderlund/4d29S/（無網格 - 作品）

http://jsfiddle.net/tomsoderlund/J46Z8/（含格 - 不工作）

除了背景網格，如：

<div class="weld-gridline x" style="left: 99.5%;"></div> 
<div class="weld-grid-column" style="left: 0.5%; width: 7.33%;"></div> 

的背景網格會混淆鼠標事件，因爲當您開始在畫布上繪圖時您會注意到。

我該如何改進此代碼？理想情況下，我希望繪圖代碼模仿JQuery UI Resizable代碼。

Answer 1

試試這個....

可按圖紙的div與電網的div衝突......因此改變烏爾HTML元素，如

HTML

<div id="content" class="weld-element-container" style="cursor: pointer;"></div> 
    <div class="grid_outer"> 
    <div class="weld-gridline x" style="left: 0%;"></div> 
    <div class="weld-gridline x" style="right: 0%;"></div> 
    <div class="weld-gridline y" style="top: 0%;"></div> 
    <div class="weld-gridline y" style="bottom: 0%;"></div> 
    <div class="weld-gridline x" style="left: 0.5%;"></div> 
    <div class="weld-gridline x" style="left: 99.5%;"></div> 
    <div class="weld-grid-column" style="left: 0.5%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 8.83%;"></div> 
    <div class="weld-gridline x" style="left: 91.17%;"></div> 
    <div class="weld-grid-column" style="left: 8.83%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 17.17%;"></div> 
    <div class="weld-gridline x" style="left: 82.83%;"></div> 
    <div class="weld-grid-column" style="left: 17.17%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 25.5%;"></div> 
    <div class="weld-gridline x" style="left: 74.5%;"></div> 
    <div class="weld-grid-column" style="left: 25.5%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 33.83%;"></div> 
    <div class="weld-gridline x" style="left: 66.17%;"></div> 
    <div class="weld-grid-column" style="left: 33.83%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 42.17%;"></div> 
    <div class="weld-gridline x" style="left: 57.83%;"></div> 
    <div class="weld-grid-column" style="left: 42.17%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 50.5%;"></div> 
    <div class="weld-gridline x" style="left: 49.5%;"></div> 
    <div class="weld-grid-column" style="left: 50.5%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 58.83%;"></div> 
    <div class="weld-gridline x" style="left: 41.17%;"></div> 
    <div class="weld-grid-column" style="left: 58.83%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 67.17%;"></div> 
    <div class="weld-gridline x" style="left: 32.83%;"></div> 
    <div class="weld-grid-column" style="left: 67.17%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 75.5%;"></div> 
    <div class="weld-gridline x" style="left: 24.5%;"></div> 
    <div class="weld-grid-column" style="left: 75.5%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 83.83%;"></div> 
    <div class="weld-gridline x" style="left: 16.17%;"></div> 
    <div class="weld-grid-column" style="left: 83.83%; width: 7.33%;"></div> 
    <div class="weld-gridline x" style="left: 92.17%;"></div> 
    <div class="weld-gridline x" style="left: 7.829999999999998%;"></div> 
    <div class="weld-grid-column" style="left: 92.17%; width: 7.33%;"></div> 
    </div> 

CSS

.grid_outer { 
     position:absolute; 
     width:100%; 
     height:100%; 
     z-index: 1; 
     top:0px; 
     left:1px; 
    } 

#content { 
    position: absolute; 
    z-index: 2; /*Should be more than `.grid_outer`*/ 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 20px; 
} 

Live Demo