Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

ListView click event does not have stopPropagation function.

5 Answers 624 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Aurimas
Top achievements
Rank 1
Aurimas asked on 21 Jan 2014, 08:24 PM
Hi,

we're using kendo mobile ListView the same as in following demo:
http://demos.kendoui.com/mobile/listview/mvvm.html

Click event does not have stopPropagation function. Are there any other ways to stop event bubbling?

Aurimas

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 23 Jan 2014, 08:05 AM
Hello Aurimas,

Widgets events do not have stopPropagation() as they are not DOM events and the do not bubble. Could you please elaborate a bit more what exactly are you trying to achieve, as there might be another way to help you?

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aurimas
Top achievements
Rank 1
answered on 23 Jan 2014, 08:50 AM
Hi, 

thanks for answer.

Simple example:

The click on list item results to modal window with button. If a button is located at the same list item area which was clicked, the button is clicked also. I can reproduce it on slower android devices, but not on desktop browser. So it seems, that it bubbles.

Kendo version: v2013.3.1127

Best regards,
Aurimas

  
0
Kiril Nikolov
Telerik team
answered on 23 Jan 2014, 01:39 PM
Hello Aurimas,

Could you please extract a runnable sample that we can test? Can you reproduce this with the latest version of Kendo UI? What is the test device that you use?

Thank you in advance for the provided information.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
IE
Top achievements
Rank 1
answered on 14 Jan 2015, 09:22 AM
Hi,
I'm having the same problem, e.stopPropagation() is not working for ListView click events.

I've attached the test code, here is the test in a kendo dojo http://dojo.telerik.com/UHIdO/4

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <div id="tabstrip-home"
        data-role="view"
        data-title="Messages"
        data-layout="tabstrip-layout"
        data-model="app.testModel"
        data-show="app.testModel.show"
     > 
        <ul data-role="listview" data-style="inset" >           
            <div data-bind="source: testDataSource" data-role="listview" data-template="test-template"></div>
         </ul>       
    </div> 
     
<script id="test-template" type="text/x-kendo-tmpl" >
  <div class="w-item-template">
    <div data-bind="click: onParentClick">
                 Click Parent
        <a data-role="button" data-bind="click: onChildClick"> Child button</a>
    </div>
  </div>
     
</script>
<script>
  var app = new kendo.mobile.Application(document.body);
  var TestViewModel,
 
    TestViewModel = kendo.data.ObservableObject.extend({
        testDataSource: null,
         
        init: function () {
            var that = this;
            kendo.data.ObservableObject.fn.init.apply(that, []);
             
            that.set("testDataSource", []);
        },
      show: function(){
             
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/Products/Read",
                    dataType: "jsonp"
                }
            },
            schema: {
                total: function () { return 77; }
            },
            serverPaging: true,
            pageSize: 2
        });      
        app.testModel.set("testDataSource", dataSource);
      },
      onParentClick: function(){
        console.log('parent');
      },
      onChildClick: function(e){
       // e.stopPropagation(); //<-- This doesn't work
        console.log('child');
       // console.log(e);
         
      }
    });
 
    app.testModel = new TestViewModel(); 
</script>
 
 
</body>
</html>

Thank you,
Alex
0
Kiril Nikolov
Telerik team
answered on 15 Jan 2015, 10:10 AM

Hello Ie,

 

As I explained in the first post - widget events do not have stopPropagation() as they are DOM events. You can implement custom logic to distinct the button from the ListView click event like this:

 

http://dojo.telerik.com/uvEg

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
Aurimas
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Aurimas
Top achievements
Rank 1
IE
Top achievements
Rank 1
Share this question
or