[SalesForce] Lightning Tile Link Refreshes Console

I still don't know why event.stopPropagation() does not work in this case, but I have solution how to fix the problem.

SLDS checkbox uses well-known CSS technique that hides <input type="checkbox"> element and shows label element that is styled with fancy images to override default checkbox look. Below the code:

<span class="slds-checkbox" onclick="{!c.onCheckboxClick}">
     <input type="checkbox" id="{!'node-checkbox-' + v.node.id}" checked="{!v.node.selected}" onchange="{!c.onCheckboxChange}" disabled="{!!v.node.checkboxEnabled}"/>
     <label class="slds-checkbox__label" for="{!'node-checkbox-' + v.node.id}">
           <span class="slds-checkbox--faux"></span>
     </label>
</span>

The trick is to put your onclick in correct place - if you do it on whole <span class="checkbox">, then no problems with event bubbling will occur. Putting onclick on input will cause click event to "leak" outside checkbox because this isn't the element that uses actually clicks.

--

Btw, I've made additional tests on ui:inputCheckbox and lightning:input type="checkbox". Unfortunately, in this case - that is you want onclick on parent div that is ignoring child checkbox clicks - you cannot use these components, HTML markup is needed.

From Summer18 I think one should use lightning:navigation component and the pagereference object that comes along with it .

The link here shows various possibilities within the lightning experience .

Lightning experience internally uses these navigation API so being consistent with the same for partners makes sense .

Here is a simple example

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
   <aura:attribute name="url" type="String"/>
   <aura:attribute name="pageReference" type="Object"/>
   <aura:handler name="init" value="{! this }" action="{! c.init }"/>
   <lightning:navigation aura:id="navService"/>
   <a href="{!v.url}">Link</a>
</aura:component>

Controller code

({
init : function(cmp, event, helper) {
    var navService = cmp.find("navService");
    // Sets the route to /lightning/o/Account/home
    var pageReference = {
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Account',
            actionName: 'home'
        }
    };
    cmp.set("v.pageReference", pageReference);
    // Set the URL on the link or use the default if there's an error
    var defaultUrl = "#";
    navService.generateUrl(pageReference)
        .then($A.getCallback(function(url) {
            cmp.set("v.url", url ? url : defaultUrl);
        }), $A.getCallback(function(error) {
            cmp.set("v.url", defaultUrl);
        }));
   }
})

Also you can navigate using the navigate API methods as shown

<lightning:navigation aura:id="navService"/>
  <a href="{!v.url}" onclick="{!c.handleClick}">Link</a>
 <lightning:button label="Navigate" onclick="{!c.handleClick}"/>

controller function

({
handleClick: function(cmp, event, helper) {
    var navService = cmp.find("navService");
    // Uses the pageReference definition in the init handler
    var pageReference = cmp.get("v.pageReference");
    event.preventDefault();
    navService.navigate(pageReference);
  }
})

I don't have a pattern but if anyone manages to build a pattern use lightning:navigationAPI along with the various pagereference types .

(Update from Mark:)

There's a pretty big caveat with the new navigation component currently. (Docs link)

These navigation resources are supported only in Lightning Experience and the Salesforce mobile app. They’re not supported in other containers, such as Lightning Components for Visualforce, Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce mobile app.