Question

我希望使用以下代码获取所点击的元素的ID或名称。如果我只有一个元素，这段代码工作正常。

        $(window).mousedown( function(e) {
            mouseTracker.clickState = true;
            console.log( "id:" + e.target.id + " name:" + e.target.name );
        }).mouseup( function() {
            mouseTracker.clickObject = '';
        });

但是如果元素被包裹在其他元素中，那么我无法获取ID。例如：

 <div id="main"> 
     <div id="subDiv"> 
            <span id="spID" onClick="alert ('hello world')"> Click Me </span>
     </div>
 </div>

在上面的例子中，它返回主div的ID。我怎样才能获得点击的元素。

Answer 1

最安全的方法是为每个元素添加一个事件监听器。有不同的方法可以做到这一点：

首先，您已在HTML中编码：

var testfunction = function(event){
    // Do something
};
<span id="spID" onclick="testfunction(event)"></span>

或更好：

<span id="spID"></span>

var element = document.getElementById('spID');
element.addEventListener('click', function(event){
    // do something
})

祝你好运

达斯汀

Answer 2

如果是我，我不会使用内联脚本。项目越大，这就变得越来越混乱。我倾向于将所有的事件监听器隐藏在一个init函数中，当你需要更多的事件监听器时，你可以添加它：

在HTML的head中：

<script src="global.js"></script>
<script>
    $(document).ready(function() {
        global.init();
    });
</script>

在单独的js文件中，链接到您的HTML（例如global.js）：

(function (global, $, undefined) {

    global.init = function() {
        //bind your event listeners in here
    };

})(window.global = window.global || {}, jQuery));

就你想要做的事情而言，如果你有一系列这些可点击的跨度，我会使用一个类选择器，所以你只需要绑定一次click事件，否则如果你如上所述只绑定到一个跨度，然后你已经知道了ID，因为你必须在绑定中使用它。

使用class：

global.init = function() {

    //assuming you have applied the class "clickable-span" to all the spans you want to be clickable
    $('.clickable-span').on('click', function(evt) {

        var id = $(this).attr('id'),
            name = $(this).attr('name');

        console.log( "id:" + id + " name:" + name );

    });

    //add more event listeners here

};

获取单击的元素ID或名称jquery或javascript

2 个答案: