diff --git a/js/src/modal.js b/js/src/modal.js
index 5c2c0208aa..447e32acfe 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -489,7 +489,7 @@ const Modal = (($) => {
     const 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 cd3c96b9e5..7af5aeb272 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -454,4 +454,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')
+  })
 })