1

米国のすべての郡の SVG レンダリングがあります。各パスには 4 つのイベントがバインドされています。

click : opens up tooltip graphic with three buttons
dblclick : executes zoom effect
mouseover : shows tooltip with county/state data, changes fill
mouseout : returns fill to original

私の問題は、ボタン付きのツールチップを開くマップのクリック イベントと、そのツールチップ内のボタンを区別したいということです。

ツールチップを作成します

thisObj._tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

マップは次の方法で作成されます

d3.json("/static/js/json/us-counties.json", function(json){

  thisObj._svg.selectAll("path")
    .data(json.features)
    .enter().append("path")
    .attr("d", thisObj._path)
    .attr("class", "states")
    .attr("id", function(d){
      return d.id;
    })
    .style("fill", "gray")
    .style("stroke", "black")
    .style("stroke-width", "0.5px")
    .on("click", mapClick)
    .on("dblclick", mapZoom)
    .on("mouseover", mapMouseOver)
    .on("mouseout", mapMouseOut);
});

私のmapClickハンドラは

var mapClick = function(d, i){

    if (thisObj._tooltipOpen){

        if ($(".button").is(":checked")){

            console.log($(this).attr("id") + " was clicked");

        } else {

            console.log("Close tooltip click recorded");
            thisObj._tooltip.transition()
                .duration(500)
                .style("opacity", 0);

            thisObj._tooltipOpen = false;

            mapMouseOut(d);
        }

    } else {
        console.log("Open tooltip click recorded");

        //tooltip template in html, want to handle a button click on these buttons
        var template = "<div id = 'tooltip_template'>" + 
            "<div class = 'county_data'>" + d.name + ", " + d.properties.StateCode + "</div>" +
            "<button id = 'add_prospective_market' class = 'button'>Prospective Market</button>" +
            "<button id = 'add_market' class = 'button'>Market County</button>" +
            "<button id = 'remove_market' class = 'button'>Remove Market</button></div>";

        thisObj._tooltip.html(template)
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY + "px"));

        $(".button").button();

        thisObj._tooltip.transition()
            .duration(1000)
            .style("opacity", .8);

        thisObj._tooltipOpen = true;
    }
}

経由でインスタンス化されたボタンハンドラーがあります

$("#add_market").on("click", function(){
   console.log("Add Market button clicked");
}

しかし、それは決してアクティブ化されず、私が取得する唯一のログはツールチップのオープン/クローズ通知です. このコードが与えられた場合、クリック ハンドラーを変更して、ボタンのクリックとボタン以外のクリックを区別するにはどうすればよいでしょうか?

4

2 に答える 2

2

私はあなたがやっていると思います

$("#add_market").on("click", function(){
   console.log("Add Market button clicked");
}

そのIDが存在する前にハンドラーが登録されているため、ハンドラーは何にも登録されていません。これは jQuery の選択であるため、空であってもエラーは発生しません。これは、ID「add_market」を持つ要素がまだ存在しない場合に発生することです。

ハンドラを登録するコード ブロックの前後にロギング ステートメントを挿入してみてください。

console.log("About to register the listener");
$("#add_market").on("click", function(){
   console.log("Add Market button clicked");
}
console.log("Done registering the listener");

「ツールチップのクリックが記録されました」というログメッセージの前後にあるかどうかを確認します。または、次の行にブレークポイントを設定できます。

$("#add_market").on("click", function(){

"$("#add_market")" jQuery の選択で何かが見つかるかどうかを確認します。

これを修正するには、テンプレート自体にリスナーを登録するか、ツールチップとボタンを作成した後にリスナー登録コードを貼り付けます。

于 2013-09-25T15:45:21.320 に答える
1

親要素に値が「none」の css プロパティ「pointer-events」がある場合、子要素のマウス イベントとタッチ イベントがブロックされます。これを解決するには、同じプロパティ (「pointer-events」) を値「」で追加します。 auto" を子要素に追加すると、子要素がイベントをトリガーします。

于 2013-10-26T10:13:36.440 に答える