最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - event.toElement.id always undefined when I trigger event click - Stack Overflow

programmeradmin3浏览0评论

I am newbie to html and java-script ,trying to fire a click event when page load finished

$(document).ready(function(event){
    $("#london").click(function(event){
       openCity(event,'London');
    });

    $("#london").trigger('click'); //this is automatic click

});

This click is working.But in my function

function openCity(evt, cityName) {
   var id = evt.toElement.id; //id is undefined only when click event triggered
}

id is undefined only when click event triggered,when normal click it contains value.

I am newbie to html and java-script ,trying to fire a click event when page load finished

$(document).ready(function(event){
    $("#london").click(function(event){
       openCity(event,'London');
    });

    $("#london").trigger('click'); //this is automatic click

});

This click is working.But in my function

function openCity(evt, cityName) {
   var id = evt.toElement.id; //id is undefined only when click event triggered
}

id is undefined only when click event triggered,when normal click it contains value.

Share Improve this question edited Aug 15, 2017 at 17:46 CLIFFORD P Y asked Aug 15, 2017 at 17:30 CLIFFORD P YCLIFFORD P Y 17.4k6 gold badges32 silver badges47 bronze badges 10
  • did you try $(this).id with openCity(this,'London') – hasan Commented Aug 15, 2017 at 17:34
  • Thank you for your reply,i will try – CLIFFORD P Y Commented Aug 15, 2017 at 17:35
  • 2 toElement is a nonstandard property, and it's only applicable for events like mouseenter and mouseleave, not click. – Barmar Commented Aug 15, 2017 at 17:35
  • See stackoverflow./questions/31865416/… – Barmar Commented Aug 15, 2017 at 17:36
  • @CLIFFORDPY your wele:). I hope it works as you wish – hasan Commented Aug 15, 2017 at 17:44
 |  Show 5 more ments

5 Answers 5

Reset to default 4

Instead of toElement you need to use target.

For more info I'd suggest to read What is the difference between Event.target, Event.toElement and Event.srcElement?

function openCity(evt, cityName) {
  var id = evt.target.id; //id is undefined only when click event triggered
  console.log('id: ' + id);
}

 $("#london").click(function(event){
    openCity(event,'London');
});

$("#london").trigger('click'); //this is automatic click
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id="london">london</button>

Use evt.target.id instead of toElement - see demo below:

$(document).ready(function(event) {
  $("#london").click(function(event) {
    openCity(event, 'London');
  });

  $("#london").trigger('click'); //this is automatic click

});

function openCity(evt, cityName) {
  var id = evt.target.id; 
  console.log(id);
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='london'>London</div>

You can use this keyword for your function like following.

function openCity(element, cityName) {
  var id = element.id; 
  console.log('id: ' + id);
}

$("#london").click(function(event){
    openCity(this,'London');
});

$("#london").trigger('click'); //this is automatic click
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="london">london</button>

You better use this inside the function, and then attr('id') to get the relevant attribute:

function openCity(el, cityName) {
   var id = $(el).attr('id');
   console.log(id);
}

$(document).ready(function(event){
    $("#london").click(function(event) {
       openCity(this, 'London');
    });

    $("#london").trigger('click'); //this is automatic click
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="london">London</div>

this in your context is the relevant elements that was clicked.

Use event.currentTarget to get the bound element.

function openCity(evt, cityName) {
   var id = evt.currentTarget.id;
}

This is a standard property of the event object. It yields the same value as this would in the handler. That way you can still just pass around the event object and have the target, the currentTarget and all the other event data as well.

Keep in mind that the target and currentTarget may be two different elements. The target is the most deeply nested element clicked, whereas the currentTarget is always the bound element.

Since you want the element that has the id, using currentTarget will be safer. Doesn't matter for the .trigger() call, but may for the actual, human clicks if you have nested elements.

发布评论

评论列表(0)

  1. 暂无评论