Quellcode durchsuchen

Added modules for stopping event propagation

This adds `StopPropagation` modules that will stop the propagation
of the most common events from the selection and dropdown containers.
These modules work from a list of 21 common events, most of which
were stopped by default in past versions, and call `stopPropagation`
on them when they are detected at the container level.

These modules are only available in full builds of Select2.

This closes https://github.com/select2/select2/issues/2033.
This closes https://github.com/select2/select2/issues/2974.
Kevin Brown vor 10 Jahren
Ursprung
Commit
8f8140e3b0

+ 4 - 1
Gruntfile.js

@@ -16,7 +16,10 @@ module.exports = function (grunt) {
     'select2/compat/initSelection',
     'select2/compat/query',
 
-    'select2/dropdown/attachContainer'
+    'select2/dropdown/attachContainer',
+    'select2/dropdown/stopPropagation',
+
+    'select2/selection/stopPropagation'
   ].concat(includes);
 
   var i18nModules = [];

+ 78 - 0
dist/js/select2.amd.full.js

@@ -4961,6 +4961,84 @@ define('select2/dropdown/attachContainer',[
   return AttachContainer;
 });
 
+define('select2/dropdown/stopPropagation',[
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+    'blur',
+    'change',
+    'click',
+    'dblclick',
+    'focus',
+    'focusin',
+    'focusout',
+    'input',
+    'keydown',
+    'keyup',
+    'keypress',
+    'mousedown',
+    'mouseenter',
+    'mouseleave',
+    'mousemove',
+    'mouseover',
+    'mouseup',
+    'search',
+    'touchend',
+    'touchstart'
+    ];
+
+    this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});
+
+define('select2/selection/stopPropagation',[
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+      'blur',
+      'change',
+      'click',
+      'dblclick',
+      'focus',
+      'focusin',
+      'focusout',
+      'input',
+      'keydown',
+      'keyup',
+      'keypress',
+      'mousedown',
+      'mouseenter',
+      'mouseleave',
+      'mousemove',
+      'mouseover',
+      'mouseup',
+      'search',
+      'touchend',
+      'touchstart'
+    ];
+
+    this.$selection.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});
+
 define('jquery.select2',[
   'jquery',
   './select2/core',

+ 78 - 0
dist/js/select2.full.js

@@ -5399,6 +5399,84 @@ define('select2/dropdown/attachContainer',[
   return AttachContainer;
 });
 
+define('select2/dropdown/stopPropagation',[
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+    'blur',
+    'change',
+    'click',
+    'dblclick',
+    'focus',
+    'focusin',
+    'focusout',
+    'input',
+    'keydown',
+    'keyup',
+    'keypress',
+    'mousedown',
+    'mouseenter',
+    'mouseleave',
+    'mousemove',
+    'mouseover',
+    'mouseup',
+    'search',
+    'touchend',
+    'touchstart'
+    ];
+
+    this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});
+
+define('select2/selection/stopPropagation',[
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+      'blur',
+      'change',
+      'click',
+      'dblclick',
+      'focus',
+      'focusin',
+      'focusout',
+      'input',
+      'keydown',
+      'keyup',
+      'keypress',
+      'mousedown',
+      'mouseenter',
+      'mouseleave',
+      'mousemove',
+      'mouseover',
+      'mouseup',
+      'search',
+      'touchend',
+      'touchstart'
+    ];
+
+    this.$selection.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});
+
 define('jquery.select2',[
   'jquery',
   './select2/core',

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
dist/js/select2.full.min.js


+ 38 - 0
src/js/select2/dropdown/stopPropagation.js

@@ -0,0 +1,38 @@
+define([
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+    'blur',
+    'change',
+    'click',
+    'dblclick',
+    'focus',
+    'focusin',
+    'focusout',
+    'input',
+    'keydown',
+    'keyup',
+    'keypress',
+    'mousedown',
+    'mouseenter',
+    'mouseleave',
+    'mousemove',
+    'mouseover',
+    'mouseup',
+    'search',
+    'touchend',
+    'touchstart'
+    ];
+
+    this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});

+ 38 - 0
src/js/select2/selection/stopPropagation.js

@@ -0,0 +1,38 @@
+define([
+
+], function () {
+  function StopPropagation () { }
+
+  StopPropagation.prototype.bind = function (decorated, container, $container) {
+    decorated.call(this, container, $container);
+
+    var stoppedEvents = [
+      'blur',
+      'change',
+      'click',
+      'dblclick',
+      'focus',
+      'focusin',
+      'focusout',
+      'input',
+      'keydown',
+      'keyup',
+      'keypress',
+      'mousedown',
+      'mouseenter',
+      'mouseleave',
+      'mousemove',
+      'mouseover',
+      'mouseup',
+      'search',
+      'touchend',
+      'touchstart'
+    ];
+
+    this.$selection.on(stoppedEvents.join(' '), function (evt) {
+      evt.stopPropagation();
+    });
+  };
+
+  return StopPropagation;
+});

+ 33 - 0
tests/dropdown/stopPropagation-tests.js

@@ -0,0 +1,33 @@
+module('Dropdown - Stoping event propagation');
+
+var Dropdown = require('select2/dropdown');
+var StopPropagation = require('select2/dropdown/stopPropagation');
+
+var $ = require('jquery');
+var Options = require('select2/options');
+var Utils = require('select2/utils');
+
+var CustomDropdown = Utils.Decorate(Dropdown, StopPropagation);
+
+var options = new Options();
+
+test('click event does not propagate', function (assert) {
+  expect(1);
+
+  var $container = $('#qunit-fixture .event-container');
+  var container = new MockContainer();
+
+  var dropdown = new CustomDropdown($('#qunit-fixture select'), options);
+
+  var $dropdown = dropdown.render();
+  dropdown.bind(container, $container);
+
+  $container.append($dropdown);
+  $container.on('click', function () {
+    assert.ok(false, 'The click event should have been stopped');
+  });
+
+  $dropdown.trigger('click');
+
+  assert.ok(true, 'Something went wrong if this failed');
+});

+ 23 - 0
tests/dropdown/stopPropagation.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../vendor/qunit-1.14.0.css" type="text/css" />
+    <link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
+  </head>
+  <body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div class="event-container">
+        <select></select>
+      </div>
+    </div>
+
+    <script src="../vendor/qunit-1.14.0.js" type="text/javascript"></script>
+    <script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>
+    <script src="../../dist/js/select2.full.js" type="text/javascript"></script>
+
+    <script src="../helpers.js" type="text/javascript"></script>
+
+    <script src="stopPropagation-tests.js" type="text/javascript"></script>
+  </body>
+</html>

+ 33 - 0
tests/selection/stopPropagation-tests.js

@@ -0,0 +1,33 @@
+module('Selection containers - Stoping event propagation');
+
+var SingleSelection = require('select2/selection/single');
+var StopPropagation = require('select2/selection/stopPropagation');
+
+var $ = require('jquery');
+var Options = require('select2/options');
+var Utils = require('select2/utils');
+
+var CutomSelection = Utils.Decorate(SingleSelection, StopPropagation);
+
+var options = new Options();
+
+test('click event does not propagate', function (assert) {
+  expect(1);
+
+  var $container = $('#qunit-fixture .event-container');
+  var container = new MockContainer();
+
+  var selection = new CutomSelection($('#qunit-fixture select'), options);
+
+  var $selection = selection.render();
+  selection.bind(container, $container);
+
+  $container.append($selection);
+  $container.on('click', function () {
+    assert.ok(false, 'The click event should have been stopped');
+  });
+
+  $selection.trigger('click');
+
+  assert.ok(true, 'Something went wrong if this failed');
+});

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.