4

I have just gone through the trailhead and documents about lightning component. One interesting part is that it seems to me that only lightning component specified tags - like <ui:button>, <ui:outputText>, etc. are responsive. Normal tags - like <div>, <p>, are not.

Is there anyway we can handle click or other events for normal html tags in lightning component?

5

You can use normal HTML tags just the same as ui elements. You just need to use the normal HTML events. Here's a very brief example:

--- demo.app ---

<aura:application>
    <div onclick="{!c.handleClick}">
        Click Me
     </div>
 </aura:application>

--- demoController.js ---

({
    handleClick: function(component, event, helper) {
        alert("You clicked me!");
    }
 })

You can also do other things, like setting styles/classes/values, etc.

This behavior is consistent between aura:application and aura:component.

I also wrote a very simplistic drag-and-drop application to figure out how HTML5 drag and drop works in Lightning... and it works very well. Here's the code I wrote as a demonstration:

--- DragDropDemo.app ---

<aura:application >
    <aura:attribute name="values"
                    type="String[]"
                    access="private" />
    <aura:attribute name="dragid"
                    type="Integer"
                    access="private" />
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}" />
    <div class="droparea" 
         ondragover="{!c.cancel}" 
         ondragenter="{!c.cancel}"
         ondrop="{!c.drop}">
        <aura:iteration items="{!v.values}"
                        indexVar="index"
                        var="value">
            <div class="row" 
                 draggable="true"
                 ondragstart="{!c.dragstart}"
                 data-drag-id="{!index}">
                {!value}
            </div>
        </aura:iteration>
    </div>
</aura:application>

--- DragDropDemo.css ---

.THIS.droparea{
    border: 1px solid black;
    position: relative;
    margin: 3px;
}
.THIS.droparea .row {
    position: relative;
    border: 1px solid red;
    padding: 3px;
    margin: 3px;
}

--- DragDropDemoController.js ---

({
    doInit: function(component, event, helper) {
        var values = "a b c d e".split(' ');
        component.set("v.values", values);
    },
    dragstart: function(component, event, helper) {
        component.set("v.dragid", event.target.dataset.dragId);
    },
    drop: function(component, event, helper) {
        var dragId = component.get("v.dragid"),
            values = component.get("v.values"),
            temp;
        temp = values[dragId];
        values[dragId] = values[event.target.dataset.dragId];
        values[event.target.dataset.dragId] = temp;
        component.set("v.values", values);
        event.preventDefault();
    },
    cancel: function(component, event, helper) {
        event.preventDefault();
    }
})
5

The normal events of the div or the HTML tag like <a> or <p> or <button> if it is created inside the components should work same

Here is a simple component code that uses all various combinations

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
  <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
  <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Ui Button" press="{!c.getInput}"/>
  <button type="button" onclick="{!c.getInput}">HTML Button</button>
   <lightning:button variant="brand" label="Lightning Button" onclick="{!c.getInput }" />
  <ui:outputText aura:id="outName" value="" class="text"/>
  <div onclick="{!c.getInput }">Div Button</div>

And the controller code

({
   getInput : function(cmp, evt) {
     console.log(evt.target);
     var myName = cmp.find("name").get("v.value");
     var myText = cmp.find("outName");
     var greet = "Hi, " + myName;
     myText.set("v.value", greet);
  }
})

And the log captured in console

enter image description here

You will notice that all of them were able to call the controller action and normal html tag also displayed targets as expected while lightning ui element launches an event named ui:press .

Conclusion is normal HTML elements should support events supported by HTML elements

  • 2
    Thank you for this. Very good information. But since fox answered first for this question and is similarly good I will mark his as accepted answer. +1 for this one. – Lance Shi Oct 31 '16 at 3:29
  • @LanceShi You are very welcome and big respect for your thought :) .Glad you saw value in the answer and thanks for upvote and dropping a comment . – Mohith Shrivastava Oct 31 '16 at 3:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.