How to bind click event to object tag?

by

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>

More Related Contents:

  1. jQuery document.createElement equivalent?
  2. Force browser to download image files on click
  3. Event detect when css property changed using Jquery
  4. Replacing css file on the fly (and apply the new style to the page)
  5. How to include multiple js files using jQuery $.getScript() method
  6. Prevent Page Load on Jquery Form Submit with None Display Button
  7. Benefits of loading JS at the bottom as opposed to the top of the document
  8. How to silently hide “Image not found” icon when src source image is not found
  9. jquery submit form and then show results in an existing div
  10. Setting CSS value limits of the window scrolling animation
  11. jQuery – How to select by attribute
  12. time delayed redirect?
  13. Detect click event inside iframe
  14. How do I get the content of a using jQuery?
  15. Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)
  16. Store jquery selector in variable
  17. How to add DOM element script to head section?
  18. Uncaught ReferenceError: $ is not defined error in jQuery
  19. Preloading images in HTML
  20. Waiting for dynamically loaded script
  21. Change placeholder text
  22. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  23. Rotate div text after clicking on button using jquery and css
  24. How to properly unload/destroy a VIDEO element
  25. How to hide optgroup/option elements?
  26. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  27. Hot to get incomplete datetime-local input values
  28. Content of html page changed by jQuery but “View Source” don’t reflect the changes
  29. Do duplicate ID values screw up jQuery selectors?
  30. Can you have multiple lines in an element?

Leave a Comment