简体   繁体   中英

How to get the DOM properties from event.target, so I can compare them?

I am trying to find out if my click is on a specific Highcharts chart. I cannot use the click event on the chart, since the area is in the title, not on the chart itself, and Highcharts does not support click events on anything beyond the plotted area.

$(document).mouseup(function(event) {
    var clickedElement = event.target;
    if (clickedElement == "chart_1")
        console.log('yes');
    console.log(clickedElement);
});

I save the event.target in a variable; then I would like to check if what I clicked is a specific chart (I have multiple charts on the same page, each one in its div).

This is what I get as output of console.log; when I click on a Highchart:

<rect x=​"0" y=​"0" width=​"880" height=​"150" strokeWidth=​"0" rx=​"15" ry=​"15" fill=​"url(#highcharts-2)​" class=​" highcharts-background">​</rect>​

I would like to check the fill and see which chart am I clicking on, to then trigger an event.

I tried to use a search by string, but it fails since the object returned from event.target is a DOM (from what I understand, I am just starting with this); so how can I access the values in the variable, and compare them, so I can look for a specific value for the class or for the fill?

EDIT:

Thanks Adeneo! The solution that works is the one using .getAttribute. This will return "yes", when I click on a chart that has in the fill "url(#highcharts-2)"

$(document).mouseup(function(event) {
    var clickedElement = event.target;
    if (clickedElement.getAttribute('fill') == "url(#highcharts-2)")
        console.log('yes');
});

All the others didn't work when I tried them, the comparison would always fail; this is the only one that works. Thanks again

只需将其包装在jQuery中并使用prop()即可获取属性:

$(clickedElement).prop("fill")

If you're using jquery version < jQuery 1.6, use

$(clickedElement).attr("fill")

Other wise for jQuery versions > jQuery 1.6 use

$(clickedElement).prop("fill")

您可以使用getAttribute

clickedElement.getAttribute('fill')

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM