如何让Select2下拉选项内的链接点击时正常打开且不选中选项

使用jQuery Select2多选下拉组件时，通过templateResult配置项自定义下拉选项渲染模板，在每个选项中添加跳转预览链接后，点击链接只会触发对应选项的选中操作，无法正常打开链接地址，需要实现点击选项内链接正常跳转，同时不触发选项选中逻辑。
原有实现代码如下：

$(document).ready(function() {
  $('.js-select-multi').select2({
    placeholder: 'Select an option',
    templateResult: formatOption
  });

  function formatOption(option) {
    var $option_text = '';
    var $option_details = '';
    var $option_url = '';

    $option_head = $(
      '<div style="display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;">'
    );

    $option_text = $(
      '<div style="font-size: 14px; min-width: 70%; height: 100%;">' + option.text + '</div>'
    );

    if ($(option.element).data('details')) {
      $option_details = $(
        '<div style="font-size: 10px; min-width: 70%; height: 100%;">' + $(option.element).data('details') + '</div>'
      );
    }

    if ($(option.element).data('url')) {
      $option_url = $(
        '<div style="font-size: 9px; height: 100%; width: 30%;"><a href="' + $(option.element).data('url') + '">Preview</a></div>'
      );
    }

    $option_foot = $(
      '</div>'
    );

    return $option_head.append($option_text).append($option_details).append($option_url).append($option_foot);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<div id="main">
  <select class="js-select-multi" name="demos[]" id="userInput" style="width: 650px;" multiple="multiple">
    <optgroup label="Opt Group 1">
      <option value="90d1aba6" data-details="Customer" data-url="https://yahoo.com">Option #1</option>
      <option value="238e894f" data-details="Customer" data-url="https://yahoo.com">Option #2</option>
    </optgroup>
    <optgroup label="Opt Group 2">
      <option value="574b18e9" data-details="Customer" data-url="https://yahoo.com">Option #3</option>
      <option value="5b626e8b" data-details="Customer" data-url="https://yahoo.com">Option #4</option>
    </optgroup>
  </select>
</div>

Select2下拉选项默认绑定了点击选中事件，点击选项内部元素时，事件会冒泡到选项根节点触发选中逻辑，同时会拦截链接的默认跳转行为。只需要在链接的点击事件中阻止事件冒泡，就可以避免触发选中，同时保留链接本身的跳转能力。

仅需调整formatOption函数中生成预览链接的逻辑，给a标签绑定点击事件阻止冒泡即可，其余代码无需改动：

if ($(option.element).data('url')) {
  const previewUrl = $(option.element).data('url');
  $option_url = $(
    `<div style="font-size: 9px; height: 100%; width: 30%;">
      <a href="${previewUrl}" target="_blank">Preview</a>
    </div>`
  );
  // 阻止点击事件冒泡到Select2选项容器，避免触发选中
  $option_url.find('a').click(function(e) {
    e.stopPropagation();
  });
}

• 如果需要在当前页跳转，去掉a标签的target="_blank"属性即可
• 不要在事件中调用e.preventDefault()，否则会导致链接无法正常跳转

内容的提问来源于stack exchange，提问作者Kermit