diff --git a/js/src/modal.js b/js/src/modal.js
index 9b3a99ddd734..fd13a687cb40 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -491,7 +491,7 @@ const Modal = (($) => {
     let config = $(target).data(DATA_KEY) ?
       'toggle' : $.extend({}, $(target).data(), $(this).data())
 
-    if (this.tagName === 'A') {
+    if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault()
     }
 
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 28c1e0ec7428..7329776bae0c 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -403,4 +403,26 @@ $(function () {
       })
       .bootstrapModal('show')
   })
+
+  QUnit.test('should not follow link in area tag', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>')
+      .appendTo('#qunit-fixture')
+
+    $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
+      .appendTo('#qunit-fixture')
+
+    $('#test')
+      .on('click.bs.modal.data-api', function (event) {
+        assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen')
+
+        setTimeout(function () {
+          assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href')
+          done()
+        }, 1)
+      })
+      .trigger('click')
+  })
 })