Mouseevent div覆蓋div上的div

我在d3.js甘特圖中有一個甘特圖。我使用滾動和縮放甘特圖：http://codepen.io/Pau/pen/FKzEa Mouseevent div覆蓋div上的div

但我有問題。這是我的修改：http://codepen.io/anon/pen/pgVdgm當鼠標懸停在線或任務上時，我想添加mouseevent（簡單警報）。但是這沒有用。我說這個事件排隊和任務：

 svg.select(".gantt-chart-canvas").append("line").attr(
      { 
      "class":"verticalDeadLine", 
      "x1" : x(testDate), 
      "y1" : 0, 
      "x2" : x(testDate), 
      "y2" : height, 
      "fill" : "none", 
      "shape-rendering" : "crispEdges", 
      "stroke" : "red", 
      "z-index" : "550", 
      "stroke-width" : "2px" 
     }).on('mouseover', function(event) { 
      alert("abcd"); 
     }) 
     .on('mouseout', function() { 

     });

我認爲問題是在這條線，其中添加矩形，類窗格

chart.append("rect") 
    .attr("class", "pane") 
    .attr("width", width) 
    .attr("height", height-margin.top-margin.bottom) 
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

窗格中的CSS類：

.pane { 
    fill: none; 
    pointer-events: all; 
}

這div封面線和任務mousevents。

的MouseEvent在線路和任務工作，當我在課堂上窗格改變：pointer-events: all;到pointer-events: auto;

但這種改變後，我的縮放和滾動不行......

如何改變呢？我想放大滾動圖表和鼠標事件在線和任務工作。我想我必須改變行類pointer-events屬性。但是如何？

總結，更簡單的例子。我有兩節課。

<div class="A"> 
    <div class="B"> 
    </div"> 
</div">

這兩個類都有mousevent，但是A類覆蓋類B.如何設置這兩個mousevents的工作？

來源

2016-02-01 The Nightmare

對於這第一個變化：

使filltransparent從none

.pane { 
    cursor: move; 
    fill: transparent; 
    pointer-events: auto; 
}

第二個變化使矩形上方.gantt-chart類group

像這樣：

var chart = d3.select("body") 
        .append("svg") 
        .attr("class", "chart") 
        .attr("width", width + margin.left + margin.right) 
        .attr("height", height + margin.top + margin.bottom); 
var drw = chart.append("rect") 
     .attr("class", "pane") 
     .attr("width", width) 
     .attr("height", height-margin.top-margin.bottom) 
     .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 
//now append ganttchart group 
var svg = chart.append("g") 
        .attr("class", "gantt-chart") 
        .attr("width", width) 
        .attr("height", height-margin.top-margin.bottom) 
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

工作代碼here

希望這有助於！

來源

2016-02-02 02:36:10 Cyril

非常感謝您的幫助。 –

Mouseevent div覆蓋div上的div

回答

相關問題