绘制DOM元素:鼠标事件会被背景元素混淆

Drawing DOM elements: mouse events get confused by background elements

本文关键字：元素 背景 事件 DOM 鼠标 绘制      更新时间：2023-09-26

我正在构建一个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的可调整大小代码。

试试这个。。。。

可能正在绘制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;
}

实时演示

相关文章：