12

I have this code

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

and jquery

$(".icon-logo").click(function() {
.....
});

but I can't click event.

toesslab
  • 5,092
  • 8
  • 43
  • 62
Pirune
  • 187
  • 1
  • 1
  • 11

2 Answers2

15

The easiest way to accomplish this goal is to wrap the object tag in a div, bind the click listener to the div, and add pointer-events: none to the object tag's styles.

Sample fiddle:

.clickable {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
}

object {
  width: 100%;
  pointer-events: none;
}
<div class='clickable' onclick='alert("WOW")'>
  <object type='image/svg+xml' data='https://douglasduhaime.com/assets/images/icons/home.svg' />
</div>
duhaime
  • 25,611
  • 17
  • 169
  • 224
  • 1
    This doesn't work in current version of Chrome (66 at the time of writing) but does in IE11 and Firefox 60. – beginner_ Jun 25 '18 at 07:01
  • @beginner_ can you post a fiddle that's not working in Chrome? I'll add one that does work in Chrome and we can compare. – duhaime Jun 25 '18 at 11:36
  • 1
    I don't know. As far as I know the rest of the layout somehow messes with this. And admittedly I know had to change the whole approach anyway as IE11 doesn't show the svg properly when using object with data attribute. It shows it correctly when getting the svg through ajax and just appending it to the parent. So i now ditched the object tag entirely solving both problems... – beginner_ Jun 25 '18 at 12:37
12

1. Issue: Event handling

Concerning the jQuery part, try to use event delegation.

From the docs:

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

$(document).on('click', '.icon-logo', function(event) {
    document.write('Event type: ' + event.type);
    document.write('<br>CSS-Class: ');
    document.write($(this).attr('class'));
});
// As said in the docs, you can attach multiple events to multiple selectors. 
// A typical example of use may be:
// $(document).on('change blur', '.icon-logo .some-other-class', function() {...}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo" style="cursor: pointer;">Click me!</object>

Edit after @Kaiido's comment:

2. Issue: The <object> element can't be clicked.

One possibility could be to not use an <object> at all but an <img> tag instead as suggested in this SO answer: make an html svg object also a clickable link.

2. Issue: Empty HTML-tag

This kind of tag <object> needs some content to show up on the page.

Your tag:

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

is not having any inner HTML-Content, so you won't be able to click it.

toesslab
  • 5,092
  • 8
  • 43
  • 62
  • 1
    I have never seen this syntax before. I really like it. Btw. `` doesn't have an `innerHTML` but is still clickable. – Andreas Louv Sep 18 '14 at 15:33
  • @NULL Which syntax do you mean? Thx for correcting. edited answer – toesslab Sep 18 '14 at 15:34
  • 2
    @NULL Read here, my dear: http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/?cb=1 It's quite nice to use – toesslab Sep 18 '14 at 15:37
  • 1
    for "Empty HTML-tag" that's not the problem. It's because the object element suffers the same security restrictions as iframe and won't let the main document know what the user is doing in it. – Kaiido Apr 23 '16 at 11:24