Pass mark events from the rendition

examples/marks.html

@@ -69,8 +69,13 @@
     // Apply a class to selected text
     rendition.on("selected", function(cfiRange, contents) {
 
-      contents.mark(cfiRange, {'something' : true}, (e) => {
+      var m = contents.mark(cfiRange, {'something' : true}, (e) => {
-        console.log("mark clicked", e.target);
+        var bounds = e.target.getBoundingClientRect();
+        var clientX = e.clientX;
+
+        if (clientX > bounds.right) {
+          console.log("mark clicked", e.target);
+        }
       });
 
       contents.window.getSelection().removeAllRanges();

src/contents.js

@@ -6,7 +6,7 @@ import {replaceLinks} from "./utils/replacements";
 import { Pane, Highlight, Underline } from "marks-pane";
 
 // Dom events to listen for
-const EVENTS = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart", "markClicked"];
+const EVENTS = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
 
 class Contents {
 	constructor(doc, content, cfiBase) {

src/rendition.js

@@ -555,6 +555,7 @@ class Rendition {
 		});
 
 		contents.on("selected", (e) => this.triggerSelectedEvent(e, contents));
+		contents.on("markClicked", (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, contents));
 	}
 
 	/**
@@ -575,6 +576,15 @@ class Rendition {
 		this.emit("selected", cfirange, contents);
 	}
 
+	/**
+	 * Emit a markClicked event with the cfiRange and data from a mark
+	 * @private
+	 * @param  {EpubCFI} cfirange
+	 */
+	triggerMarkEvent(cfiRange, data, contents){
+		this.emit("markClicked", cfiRange, data, contents);
+	}
+
 	/**
 	 * Get a Range from a Visible CFI
 	 * @param  {string} cfi EpubCfi String