Adding additional check for the Dropdown click handler #114 (comment)

thednp · Jun 29, 2017 · 351ae64 · 351ae64
1 parent 7527d1d
commit 351ae64
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 14 deletions.
diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -793,7 +793,8 @@
       },
       clickHandler = function(e) {
         var eventTarget = e[target],
-          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && getAttribute in eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+
         if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
           e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
           relatedTarget = element;

diff --git a/dist/bootstrap-native-v4.min.js b/dist/bootstrap-native-v4.min.js
diff --git a/dist/bootstrap-native.js b/dist/bootstrap-native.js
@@ -950,7 +950,7 @@
       },
       clickHandler = function(e) {
         var eventTarget = e[target],
-          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && getAttribute in eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
         if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
           e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
           relatedTarget = element;

diff --git a/dist/bootstrap-native.min.js b/dist/bootstrap-native.min.js
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
   <!-- Just use it for all browsers on production websites.  -->
 
   <!-- Native JavaScript for Bootstrap 3 Polyfill -->
-  <!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.10/polyfill.min.js"></script> -->
+  <!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/polyfill.min.js"></script> -->
   <script src="./dist/polyfill.js"></script>
   <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -191,9 +191,9 @@ <h3>Load from CDN</h3>
               and <a href="https://cdnjs.com/libraries/bootstrap.native">here</a> on cdnjs. Other <a href="https://www.google.com/search?q=bootstrap+native+cdn" target="_blank">CDN links</a> are also available.</p>
 
 <pre><code class="language-markup">&lt;!-- jsdelivr repo --&gt;
-&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.10/bootstrap-native.min.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native.min.js"&gt;&lt;/script&gt;
 &lt;!-- or cdnjs repo --&gt;
-&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.10/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
 
             <p>As most of the scripts manipulate the DOM when ready, there is no need to include a <code>document.ready</code> like statement or link the script(s) in the <code>&lt;head&gt;</code>. We don't do that 
               with native JavaScript unless required by a special ocasion.</p>
@@ -229,7 +229,7 @@ <h3>Browser support</h3>
             <p>The Native JavaScript for Bootstrap comes with a dedicated <kbd>4Kb</kbd> polyfill we made called <em><a href="./assets/js/polyfill.js" target="_blank">polyfill.js</a></em> for IE8-IE11. Since most 
               of the legacy browsers don't cover support for the standardized <code>Event</code> the <em>polyfill.js</em> can be combined with HTML5 shims like so:</p>
 
-<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.10/polyfill.min.js"> &lt;/script>
+<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/polyfill.min.js"> &lt;/script>
 &lt;!--[if lt IE 9]>
   &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">&lt;/script>
 &lt;![endif]-->
@@ -3242,7 +3242,7 @@ <h3 class="visible-xs">Navigation</h3>
   <!-- highlighter -->
   <script src="./assets/js/prism.js" type="text/javascript"></script>
 
-  <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.10/bootstrap-native.min.js"></script>  now we have CDN -->
+  <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native.min.js"></script>  now we have CDN -->
   <!--<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script>-->
   <script type="text/javascript" src="./dist/bootstrap-native.js"></script>
   <script type="text/javascript" src="./assets/js/scripts.js"></script>

diff --git a/lib/V3/dropdown-native.js b/lib/V3/dropdown-native.js
@@ -26,7 +26,7 @@ var Dropdown = function( element, option ) {
     },
     clickHandler = function(e) {
       var eventTarget = e[target],
-        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && getAttribute in eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
       if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
         e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
         relatedTarget = element;

diff --git a/lib/V4/dropdown-native.js b/lib/V4/dropdown-native.js
@@ -26,7 +26,8 @@ var Dropdown = function( element, option ) {
     },
     clickHandler = function(e) {
       var eventTarget = e[target],
-        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && getAttribute in eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
+
       if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
         e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
         relatedTarget = element;

diff --git a/v4.html b/v4.html
@@ -141,15 +141,15 @@ <h2>Quick Usage Guide </h2>
 
       <h3>CDN</h3>
 
-<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdn.jsdelivr.net/bootstrap.native/2.0.10/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
 </code></pre></div>
 
-<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.10/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
 </code></pre></div>
 
       <p>Unfortunately IE10+ browsers still require <code>Event</code>, <code>CustomEvent</code> and <code>dispatchEvent</code> polyfills:</p>
 
-<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.10/polyfill.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/polyfill.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
 </code></pre></div>
 
       <h3>npm/Bower</h3>