取消从onClick中的链接触发的javascript函数

Question

我的页面的表单包含20个选择属性，就表单的意义而言，该表单分为10个相关对。

我使用户能够通过依赖jQuery的javascript将10对中的每一个的选项随机化。

选择的随机化效果很好。单击一个“ Randomise”链接将对有问题的对进行随机化，而其他选择对则保持原样。

问题出在链接的onClick警报/检查中：因为链接始终对单击进行“侦听”，即使用户单击“取消”，选择的随机化仍然发生。

我正在寻找的是一种能够在链接上发出警报的方式，如果选择是“取消”或类似选项，用户将能够停止触发随机化功能。

我的javascript编码技能不是很好，但是我猜想对此可能无法修改内联链接代码，因为对于任何类型的单击，链接始终会“监听”，并且javascript函数本身必须进行更改才能在链接中放置警报，这可以取消随机化或使其继续进行。

jQuery(document).ready(function() {

  jQuery("#randomSelect1").click(function() {
    var select = document.getElementById('pair_1_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_1_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  jQuery("#randomSelect2").click(function() {
    var select = document.getElementById('pair_2_phrase');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;

    var select = document.getElementById('pair_2_descriptor');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
  });

  //8 more pairs like this..

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="pair_1_phrase" id="pair_1_phrase">
  <option value="0">State</option>
  <option value="1">Condition</option>
  <option value="2">Health</option>
  <option value="3">Strength</option>
</select>

<select name="pair_1_descriptor" id="pair_1_descriptor">
  <option value="0">moderate</option>
  <option value="1">great</option>
  <option value="2">good</option>
  <option value="3">superior</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect1" href="#">Randomise</a></p>


<select name="pair_2_phrase" id="pair_2_phrase">
  <option value="0">Requirement</option>
  <option value="1">Need</option>
  <option value="2">Lack</option>
  <option value="3">Necessity</option>
</select>

<select name="pair_2_descriptor" id="pair_2_descriptor">
  <option value="0">urgent</option>
  <option value="1">pressing</option>
  <option value="2">extreme</option>
  <option value="3">crucial</option>
</select>

<p><a onClick="return confirm('Randomise these selects?');" id="randomSelect2" href="#">Randomise</a></p>

<!-- 8 more pairs like this.. -->

Answer 1

如果我没错，您应该将confirm移至click事件块，请参见下文：

jQuery("#randomSelect1").click(function () {
    if(confirm('Randomise these selects?')) {
        var select = document.getElementById('pair_1_phrase');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;

        var select = document.getElementById('pair_1_descriptor');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
    }
    // else ...
});

当然删除内联confirm

<p><a id="randomSelect1" href="#">Randomise</a></p>

Answer 2

一般来说，随机化应该是在确认结果后发生的，因此您应该或有一个监听者，并在其中进行confirm，或在<a onClick="confirm...中签入：

function selectRandomValue(elSelect) {
    var items = elSelect.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    elSelect.selectedIndex = index;
}

function randomizeValuesInBlock(index) {
        var select = document.getElementById(`pair_${index}_phrase`);
        selectRandomValue(select);

        var select = document.getElementById(`pair_${index}_descriptor`);
        selectRandomValue(select);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="pair_1_phrase" id="pair_1_phrase">
  <option value="0">State</option>
  <option value="1">Condition</option>
  <option value="2">Health</option>
  <option value="3">Strength</option>
</select>

<select name="pair_1_descriptor" id="pair_1_descriptor">
  <option value="0">moderate</option>
  <option value="1">great</option>
  <option value="2">good</option>
  <option value="3">superior</option>
</select>

<p><a onClick="confirm('Randomise these selects?') ? randomizeValuesInBlock(1) : '';" id="randomSelect1" href="#">Randomise</a></p>


<select name="pair_2_phrase" id="pair_2_phrase">
  <option value="0">Requirement</option>
  <option value="1">Need</option>
  <option value="2">Lack</option>
  <option value="3">Necessity</option>
</select>

<select name="pair_2_descriptor" id="pair_2_descriptor">
  <option value="0">urgent</option>
  <option value="1">pressing</option>
  <option value="2">extreme</option>
  <option value="3">crucial</option>
</select>

<p><a onClick="confirm('Randomise these selects?') ? randomizeValuesInBlock(2) : '';" id="randomSelect2" href="#">Randomise</a></p>