How do I prevent the click event (when using showOn: 'click') from bubbling up?

7 posts, 1 answers
  1. Fred
    Fred avatar
    7 posts
    Member since:
    Mar 2013

    Posted 16 May 2013 Link to this post

    By customer request I'm using a tooltip that only appears when explicitly clicked, and does not autohide.

    The initialisation looks like:
    $("#MyIdentifier").kendoTooltip({
        position: "right",
        autoHide: false,
        showOn: 'click',
        content: $('#calc1'),
        show: model.openCalculator,
        width: "224px"
    });
    This works like a charm, tooltips open when clicked and hide when explicitly closed (by a close button or clicking anywhere outside the tooltip).

    The problem I'm encountering is that the tooltip element is within a division that has a handler for the click event too. And whenever the tooltip opens, the click handler for the surrounding div is being called too. This is undesired behaviour and I would like to know if anyone figured out a way to prevent this from happening?

    You can see this behaviour in this simplified example:

    http://jsfiddle.net/RedF/pgBNb/

    All suggestions are appreciated!
    Cheers,
     Fred
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 17 May 2013 Link to this post

    Hello Fred,

    In order to implement such behavior, you should hook a click event handler to the same element to which the tooltip is attached and to call stopProparation() method of the event argument. I have updated the jsFiddle in order to illustrate this.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Fred
    Fred avatar
    7 posts
    Member since:
    Mar 2013

    Posted 17 May 2013 Link to this post

    Thanks Rosen,  that indeed works fine.

    I discovered that in my Real World project I'm using the 'filter' configuration, and this seems to break this solution. See http://jsfiddle.net/RedF/BpA8K/.

    Is there a collection of objects returned when using the 'filter'? If so, I'll try to use .each() looping to add the click handler to all the returned objects.
    Cheers,
    Fred
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 17 May 2013 Link to this post

    Hello Fred,

    Are you adding the tooltip elements on a fly or they are statically declared on the page? If later is true, then you can hook the click handler selector directly to those elements:

    $("#container").kendoTooltip({
        autoHide: false,
        filter: ".Tooltip",
        showOn: "click"
    });
     
    $("#container .Tooltip").on("click", function(e) {
        e.stopPropagation();
    });
     
    $("#tooltips").click(function () {
         alert("I'm clicked too!");  
    });


    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Fred
    Fred avatar
    7 posts
    Member since:
    Mar 2013

    Posted 17 May 2013 Link to this post

    I'm working with a combination of Kendo UI and Knockout.

    Although I do configure the tooltips on the page in the document ready event, I'm afraid knockout does some additional stuff for some bindings. Your last solution with the event handler containing the stopPropagation is being called by those tooltips that are not within a <div data-bind="visible:...."> or <div data-bind="css:...."> division.

    But I'm afraid the 'visible' and 'css' bindings from knockout are messing with the elements in such a way that this solution does not work for tooltips within these divisions.

    Other knockout bindings like <div data-bind="with:..."> etc. are not inhibiting the event handler.

    Interestingly something or some sequence of actions is preventing it from working on jsfiddle also :(, see http://jsfiddle.net/RedF/wEP3M/

    Regards,
    Fred
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 May 2013 Link to this post

    Hi Fred,

    Here is a modified example which use the suggested approach as well as knockout.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Answer
    Fred
    Fred avatar
    7 posts
    Member since:
    Mar 2013

    Posted 21 May 2013 Link to this post

    Rosen, thanks for your example.

    Your code was working from most of my tooltips, the final problem was when using a knockout 'with' binding. Most tooltips inside 'with' bindings were working fine, but one specific 'with' binding never entered the registered click handler.

    This problem is caused by using a 'with' binding like:
    <div data-bind="with: aResult">
        <div id="tooltips" data-bind="css: { foo: applyFoo() }, visible: visible">
            Click here should show the alert
            <div class="Tooltip" title="(tooltip) Over NHG" ><p>Click here</p></div>
        </div>
    </div>
    and later re-assigning the 'aResult' object (in my case with the result from an ajax call):
    self.aResult(ko.mapping.fromJS(result));
    causes the click handler to be removed from my tooltip. Probably the logic behind 'with' gets very busy re-wiring DOM elements etc.

    I found two ways to work around this. The first is to straightforward assign the results one by one to the individual observables from the 'aResult' object:
    var rc = ko.mapping.fromJS(result);
    self.aResult().aProperty(rc.aProperty());
    self.aResult().anotherProperty(rc.anotherProperty());
    ...
    The second way is to use knowledge about how knockout observables are constructed and use a for loop:
    var source = ko.mapping.fromJS(result);
    var target = self.aResult();
    var prop, srcVal, tgtProp, srcProp,
            isObservable = false;
    for (prop in source) {
        if (!source.hasOwnProperty(prop)) {
            continue;
        }
     
        if (ko.isWriteableObservable(source[prop])) {
            isObservable = true;
            srcVal = source[prop]();
        } else if (typeof (source[prop]) !== 'function') {
            srcVal = source[prop];
        }
         
        if (ko.isWriteableObservable(target[prop])) {
            target[prop](srcVal);
        } else if (target[prop] === null || target[prop] === undefined) {
     
            target[prop] = isObservable ? ko.observable(srcVal) : srcVal;
     
        } else if (typeof (self.Resultaat[prop]) !== 'function') {
            target[prop] = srcVal;
        }
     
        isObservable = false;
    }
    Once again, thank you for your patience and support. My tooltips are working as intended :).

    Cheers,
    Fred


Back to Top
Kendo UI is VS 2017 Ready