javascript - Prevent Click Event from document Level to child elements -

-

i create hybrid app using sencha frame work have setting screen, when setting screen visible in screen want prevent touch event user other components except specific views. saw of post saying event stopprogation() , preventdefault() event further not clear it.

i tried add click event document release setting list view when user tap on screen if user tap on other component in screen trigger button action also, how prevent this.

also don't want prevent action of touch when user click on setting list or specific component in view.

note: not able use jquery in project because using jquery side sencha may cause performance issue.

code:

ext.define('myapp.view.controlpanel.controlpanel', {     extend: 'ext.container',     alias: "widget.controlpanel",     requires: [                    'ext.segmentedbutton'     ],     config: {         layout: {             pack:'stretch'         },         docked:'bottom'     },     documentclickhandler:function(event){         console.log('document clicked');          document.removeeventlistener('click', arguments.callee, false);          var settinglistcontainer = ext.componentquery.query("#setting-list-container")[0];         if (settinglistcontainer) {             var controlpanel = settinglistcontainer.up('controlpanel');             if (controlpanel) {                 controlpanel.remove(settinglistcontainer, true);                 var segmentbutton = controlpanel.down("#control-segment-button");                 if (segmentbutton) {                     segmentbutton.setpressedbuttons();                 }             }         }         event.preventdefault();         return false;;     },      onsegmenttoggled: function (container, button, pressed)     {                    console.log("toggle event");             var index = container.getitems().indexof(button);             if (index == 0) {                 if (pressed) {                     container.setpressedbuttons();                     var settinglistcontainer = this.down("#setting-list-container");                     if (settinglistcontainer) {                         this.remove(settinglistcontainer, true);                         // close nav touching partial off-screen content                      }                 }             }a             else {                 var settinglistcontainer = this.down("#setting-list-container");                 if (!pressed&&settinglistcontainer) {                     this.remove(settinglistcontainer, true);                 }                 else if (pressed) {                     var existinglist = ext.componentquery.query('settinglist')[0];                     if (existinglist) {                         this.add(existinglist);                         document.addeventlistener('click', this.documentclickhandler, false);                     }                     else {                         this.add({ xtype: "settinglist", height: '349px', sorthandler: this.config.sorthandler, segmentcontrol: container });                         document.addeventlistener('click',this.documentclickhandler, false);                     }                 }             }      },     listeners: [         {             delegate: "#control-segment-button",             event: 'toggle',             fn: 'onsegmenttoggled'         }             ],     initialize: function () {         //ext.require("");         var segmentedbutton = ext.create('ext.segmentedbutton', {             layout: {                 type: 'hbox',                 pack: 'center',                 align: 'stretchmax'             },             docked: 'bottom',             id:'control-segment-button',             allowmultiple: false,             allowdepress: true,             config: { flex: 1 },             items: [                 {                     iconcls: 'time',                     width: '50%',                     cls:'palin-segment',                     style:"border-radius:0px"                 },                 {                     iconcls: 'settings',                     width: '50%',                     cls: 'palin-segment',                     style: "border-radius:0px"                 }             ]         });         this.add(segmentedbutton);      }  });

event.preventdefault(); keeps framework or document handling event.


Comments

Post a Comment

Popular posts from this blog

c# - How to get the current UAC mode -

-
can check current uac type set in device before running application through c#. i got know approach check whether current user administrator or not. but, need know uac type set (i.e. default/never notify) internal logic. is possible? please help. this article self-elevation , checking level program runs in. due security reasons i'm afraid won't able retrieve uac level set. http://code.msdn.microsoft.com/windowsdesktop/csuacselfelevation-644673d3
Read more

postgresql - Lazarus + Postgres: incomplete startup packet -

-
i've been building lazarus pascal program using postgresql on back-end. used work fine following lines opening db. dbconn:= tpqconnection.create(nil); dbconn.hostname := 'localhost'; dbconn.databasename:= 'dbhrs'; dbconn.username:='mizk'; dbconn.password:='123'; dbconn.open; if dbconn.connected openhrsdb := true else openhrsdb := false; but moment change localhost server's ip (on lan), program stops. no errors or warnings. have no clue happening. here related details may narrow down problem. the program i'm running workstation on same lan server. both machines run ubuntu 12.04 desktop i can access postgres db on server using pgadmin iii, guess it's not firewall issue. i have allowed postgresql ufw , ufw disabled. strangely, when firewall disabled, can ssh server terminal using workstation. when it's enabled, can't my biggest concern right why pascal program not working when i...
Read more

angularjs - ng-repeat duplicating items after page reload -

-
i have angularjs application, node.js , express backend, i'm not using angular's routings. when refresh page using browser's refresh button, items on page loaded in ng-repeat duplicate. i'm not sure why occurs, i'm wondering happens controller when page reloaded? old controller destroyed, , new 1 created, or controller added, causing duplications? here part of html file, relvevant controller code: (trans.html) <div class="pure-u-1-2" ng-repeat="trans in transactions | filter:searchtext"> <div class="transaction" ng-style="{'border-style': 'solid', 'border-color': categorycolours[trans.category.name]}"> <h2 id="transname">{{ trans.name }}</h2> <h4>{{ trans.description }}</h4> <h4>{{ trans.date }}</h4> <div class="pure-u-1-1"> <h3 id="categor...
Read more