Question

对不起，我的问题不够明确。 div中的一些g元素是svg个元素的组。看看at a fiddle here。因此，分组允许title和跨多个对象的CSS。当有人点击任何SVG对象时，我希望top获取父g的ID。

我的html包含一个div（id="svg-container"），其中包含大量SVG元素，每个元素都有自己的ID。

我在页面加载时设置了一个事件监听器，它监听容器div（svg-container）上的click事件，并且我想提取SVG对象的id（如果单击了一个）。 / p>

HTML：

<div id="svg-container">
   <g id="svg1">...</g>
   <g id="svg2">...</g>
   <g id="svg3">...</g>
....
</div>

Answer 1

你能试试吗？

$('#svg-container').bind('click', function(event) {
    alert(event.target.id);
 });

Answer 2

将处理程序附加到g元素：

$('#svg-container').on('click', 'g', function(e) {
  e.stopPropagation();
  console.log(this.id);
});

＆＃13;

$('#svg-container').on('click', 'g', function(e) {
  e.stopPropagation();
  console.log(this.id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="svg-container">
  <svg id="world-map" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="998 -261 1610.2 1055.2" xml:space="preserve" enable-background="new 998 -261 1610.2 1055.2">
    <g class="oceania new-zealand" id="new-zealand">
      <title>New Zealand</title>
      <path d="M2559.9,582.6L2551.4 553.9 2547.7 553.4 2549.4 573.6 2547.2 582.7 2538.2 589.4 2538.7 597.2 2538.7 605.7 2541.2 608.7 2565.9 587.4 2565.9 582.6 z"></path>
      <path d="M2505.9,618.4L2480.7 629.4 2481.9 634.2 2495.7 640.9 2510.9 626.9 2519.9 625.7 2521.2 619.1 2534.4 606.2 2529.7 597.2 z"></path>
    </g>
    <g class="oceania indonesia" id="indonesia">
      <title>Indonesia</title>
      <path d="M2276.6,324.4L2268.9 319.5 2267.6 311.8 2223.9 273.9 2223.4 277.9 2234.9 297.3 2238.1 297.3 2262.4 337.4 2271.9 338.4 z"></path>
      <path d="M2337.9,304.9L2331.9 292.9 2331.2 285.7 2332.2 283.5 2340.2 277.8 2329.7 270.2 2327.4 265.9 2322.4 275.2 2313.4 284.9 2300.6 294.4 2301.1 300.4 2294.6 300 2292.9 300 2289.6 300.9 2295.4 323.3 2304.2 324.3 2315.7 328.7 2315.7 333 2320.9 332 2328.7 321.4 2328.7 312.7 2332.9 303.9 z"></path>
      <path d="M2355.2,323.2L2352.7 318.7 2360.4 312.9 2358.7 310.4 2351.2 315.4 2349.2 315.4 2345.4 309.9 2346.7 307.5 2352.9 304.5 2362.2 307.4 2364.9 307.3 2371.9 300.7 2369.2 297.8 2362.7 302.8 2358.4 302.8 2352.2 299.8 2347.7 299.9 2342.7 308 2339.4 322 2337.9 327.5 2341.7 332.3 2339.2 339.4 2339.2 340.7 2344.9 340.7 2346.9 322.9 2348.7 323.4 2351.9 339.5 2355.2 340.4 2358.2 333.5 z"></path>
      <path d="M2305.9,350L2291.9 346.7 2275.9 343.3 2271.4 346.4 2272.4 349.2 2287.1 352.5 2294.6 353.9 2297.9 357.3 2306.4 357.9 2310.4 361.4 2314.2 360.4 2317.4 357.4 2311.2 354.5 z"></path>
      <path d="M2320.9,359.9L2323.2 362.3 2328.4 360.3 2324.7 357.9 z"></path>
      <path d="M2336.9,358.7L2335.2 356.2 2330.9 356.4 2331.7 359.5 2335.4 360.5 z"></path>
      <path d="M2335.4,365.4L2339.7 368.9 2342.9 368.9 2340.2 364.8 z"></path>
      <path d="M2345.2,359.5L2343.2 357.9 2341.4 359.3 2340.4 361.3 2347.9 362.4 2353.9 359 2350.4 358 z"></path>
      <path d="M2365.9,360.4L2357.4 367.7 2358.2 369.5 2361.9 368.9 2366.2 364.9 2374.7 363.7 2372.9 360.8 z"></path>
      <path d="M2330.9,257.9L2341.7 246.2 2337.4 239.9 2335.9 242.7 2335.2 246 2327.2 256.4 2327.7 258.4 z"></path>
      <path d="M2356.4,238.2L2350.7 235.9 2350.4 244.4 2353.7 247.5 2354.7 253.7 2357.9 254.4 2359.4 250.5 2356.9 248.8 z"></path>
      <path d="M2364.2,246L2363.4 239.5 2359.4 239.3 2359.4 246.8 2361.2 249.7 z"></path>
      <path d="M2365.9,240.7L2368.9 240.7 2368.4 233.9 2365.2 231.9 2361.4 232.7 2364.4 236.8 z"></path>
      <path d="M2372.9,251.9L2367.4 248 2367.9 252.9 2362.4 257.5 2357.7 258 2352.7 263.4 2352.9 265.9 2357.4 264.4 2360.7 262.4 2363.4 269.4 2368.4 272.8 2370.4 272 2372.2 269.9 2368.4 266 2370.7 264.3 2373.2 266.4 2374.9 263.4 2373.2 259.9 z"></path>
      <path d="M2345.2,226.2L2347.9 224.2 2352.9 224.9 2353.9 229.4 2357.7 229.7 2359.4 227.3 2357.2 224.2 2354.4 221.5 2348.7 220.9 2345.4 215.9 2349.2 210.4 2349.4 205.8 2346.9 199.7 2340.9 198.2 2336.4 201.3 2335.9 211 2342.9 224.4 z"></path>
      <path d="M2343.2,227.4L2344.4 232 2346.9 233.5 2348.4 231.4 2345.9 227.9 z"></path>
    </g>
    <g class="oceania southern-australia" id="southern-australia">
      <title>Southern Australia</title>
      <path d="M2340.4,464.4L2340.4 506.1 2353.9 504.7 2372.2 510.2 2370.9 517.6 2373.4 524.9 2387.2 522.4 2387.9 526.1 2378.9 532.7 2381.9 535.2 2388.4 532.7 2386.7 552.9 2399.4 562.6 2401.9 561.7 2401.9 464.4 z"></path>
    </g>
    <g class="oceania papua-new-guinea" id="papua-new-guinea">
      <title>Papua New Guinea</title>
      <path d="M2383.2,310.3L2385.4 305.9 2386.7 304.4 2384.4 301.9 2381.2 300.8 2379.7 295.9 2376.4 303.7 2381.4 310.3 z"></path>
      <path d="M2392.4,322.4L2389.7 321.4 2382.7 322.9 2380.7 325 2382.4 327.9 2386.9 326.3 2389.7 324.5 2393.9 327.9 2395.7 326.4 z"></path>
      <path d="M2536.2,451.9L2544.2 462.7 2548.2 464.6 2548.9 460.2 2536.9 448.9 z"></path>
      <path d="M2492.4,327.4L2490.9 329.4 2499.2 336.7 2500.2 340.9 2502.4 340.7 2502.7 336.3 2500.2 334 z"></path>
      <path d="M2496.4,337.7L2494.9 338 2493.9 342.4 2490.7 344.4 2481.4 346 2481.9 349.5 2491.7 349 2497.9 345.2 2497.4 338.4 z"></path>
      <path d="M2509.9,344.8L2507.4 345.3 2509.7 351.2 2513.4 354.8 2514.4 353.8 2513.9 349.9 z"></path>
      <path d="M2522.7,358.7L2520.7 354.5 2517.9 353.9 2518.2 357.9 2520.4 360 z"></path>
      <path d="M2520.9,363.7L2518.9 365.8 2520.9 369.7 2523.4 370.4 2523.4 367.8 z"></path>
      <path d="M2532.4,366.7L2529.9 362.4 2525.7 361.4 2527.2 365.7 2530.7 369.7 z"></path>
      <path d="M2539.7,372.2L2534.4 367.8 2535.4 373 2537.7 376.3 z"></path>
      <path d="M2541.2,384.9L2539.9 379.9 2537.2 379.4 2536.2 380.9 2539.2 384.8 z"></path>
      <path d="M2527.7,388.4L2530.4 391.9 2532.4 390.7 2530.7 386.9 z"></path>
      <path d="M2561.2,409.4L2558.9 412.2 2559.9 415.4 2560.9 416.1 2562.9 413.6 z"></path>
      <path d="M2566.2,420.2L2564.7 417.7 2562.2 418.1 2562.2 420.4 2564.7 421.1 z"></path>
      <path d="M2564.4,440.2L2565.9 441.9 2568.7 441.1 2565.4 438.6 z"></path>
      <path d="M2608.2,434.9L2606.2 437.7 2605.9 440.9 2608.2 443.4 z"></path>
      <path d="M2471.7,354L2475.9 351.9 2472.9 345.2 2466.4 344.9 2464.9 337.7 2448.2 326.4 2445.4 326.2 2432.9 318.2 2422.9 324.9 2419.2 327.2 2413.2 323.4 2412.9 311.3 2409.9 310.9 2402.7 311.8 2398.2 315 2399.9 318.9 2407.7 320.3 2407.7 321.7 2402.9 325.7 2405.2 333.9 2407.7 334 2409.7 325.9 2413.4 325.9 2414.9 333.9 2433.4 349 2433.9 360.9 2440.2 367.8 2444.7 367.7 2444.7 367.7 2445.2 367.5 2445.4 367.5 2445.4 367.5 2450.7 367.4 2458.7 358.2 2465.2 358.4 2469.4 362.3 2470.9 373.9 2484.4 381 2487.9 379.8 2487.9 375.4 2476.9 366.4 z"></path>
    </g>
    <g class="oceania eastern-australia" id="eastern-australia">
      <title>Eastern Australia</title>
      <path d="M2396.4,589.9L2396.9 598.4 2405.9 597.9 2416.4 582.1 2399.4 577.7 z"></path>
      <path d="M2467.7,466.4L2471.2 464.1 2463.9 441.6 2456.2 436.1 2457.4 405.7 2450.2 400.2 2448.4 383.2 2444.9 383.2 2432.7 423.2 2426.2 423.9 2403.9 464.4 2403.9 562.1 2406.7 561.2 2410.4 564.7 2431.4 561.7 2451.4 529.6 2458.4 527.7 2472.9 501.1 2476.7 477.9 z"></path>
    </g>
    <g class="oceania western-australia" id="western-australia">
      <title>Western Australia</title>
      <path d="M2339.9,411.6L2340.4 418.9 2335.7 425.6 2323.4 425.6 2297.6 436.4 2288.6 460.7 2287.9 503.7 2281.4 508.7 2280.6 512.9 2289.6 519.1 2311.9 514.7 2323.4 514.7 2327.7 508.7 2338.2 506.7 2338.2 462.4 2345.5 462.4 2345.5 408.2 z"></path>
    </g>
    <g class="oceania northern-australia" id="northern-australia">
      <title>Northern Australia</title>
      <path d="M2409.9,406.7L2418.2 384.2 2402.4 381.2 2384.9 386 2380.2 400.1 2372.4 401.9 2371.9 392.2 2347.2 407.1 2347.2 462.4 2402.7 462.4 2424.9 421.9 z"></path>
    </g>
  </svg>
</div>

＆＃13;

Answer 3

您可以使用event delegation。这样的事情应该有效：

<强> JS

$( "#svg-container" ).on( "click", "g", function( event ) {
    var elementId = $(event.target).attr("id");
    alert(elementId);
});

Answer 4

此处不需要事件委托。事件处理程序将完成这项工作。如果您使用jQuery，这应该可以使用。

$('#svg-container').bind('click', function(event) {
    alert($(event.target).closest("g").attr("id"));
});

jQuery获取元素中元素的ID

4 个答案: