Question

我如何获得属性＆＃39; id＆＃39;使用jquery或简单的javascript点击它时的元素。我试过了：

$(document).one("click",function(){
console.log(this);
}

它记录完整的文档对象，因为我使用带有选择器的文档，但是如何在单击它时获取元素的id。元素可以是SVG或PATH或DIV。

示例HTML

<div id="main">
<div id="middle">
<svg id="main_svg">
  <path>// code for path</path>
  <svg><rect>//code for rect</rect></svg>
</svg>
</div>
</div>

我想要＆＃34; main_svg＆＃34;中的元素的id单击它时的SVG标记。

Answer 1

您可以使用all selector绑定SVG内所有元素的事件。

对于里面的所有元素：

$('#main').on('click', '*', function(){
    console.log(this);
})

但我想你可以并且想要避开所有元素并且只针对直接儿童：

$('#main').on('click', '> *', function(){
    console.log(this);
})

备注

在您的代码中，您在div上有两次ID main，而在SVG上，ID必须是唯一的，因此两个元素都不能相同。

请注意，使用all选择器可能会降低页面的性能，因此可能还有另一种方法可以实现目标。

Answer 2

获取元素标记及其ID：

＆＃13;

$("#mySvg").click(function(event) {
    var elemTag = $(event.target).prop("tagName");
    var elemId = $(event.target).attr("id")
    alert("this is a <" + elemTag + ">. Its id is: " + elemId);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="mySvg" width="400" height="400">
<rect id="myRectangle" width="300" height="100" style="fill:rgb(0,0,255)"></rect>
<path id="myPath" d="M150 0 L75 200 L225 200 Z"></path>
</svg>

＆＃13;

Answer 3

使用originalEvent属性获取目标：

$(document).ready(function(){

    $('#main').on("click",function(e){
        // Returns the element clicked on
        console.log(e.originalEvent.target); 
        // Returns the id of the element
        var clickedElemId = e.originalEvent.target.id;
        if (clickedElemId) console.log(e.originalEvent.target.id)
    });
});

如果您将标记更改为包含一个ID为“main”的元素。

点击它时选择元素jquery

3 个答案: