javascript - 使用 addEventListener 后看不到选中的 radio

Question

当我添加事件监听器时，所选单选按钮不会在单选按钮内显示选中的黑点。当我删除事件监听器时，它会再次出现。我可以看到它选择了单选按钮，因为轮廓可见。

JS代码如下:

(function(){

    'use strict';
    var allQuestions = [
        {
            question: 'Question 1',
            options: [
                'QA1 1',
                'QA1 2',
                'QA1 3',
                'QA1 4'
            ],
            answer:3
        },
        {
            question: 'Question 2',
            options: [
                'QA2 1',
                'QA2 2',
                'QA2 3',
                'QA2 4',
                'QA2 5',
                'QA2 6'
            ],
            answer:1
        },
        {
            question: 'Question 3',
            options: [
                'QA3 1',
                'QA3 2',
                'QA3 3',
                'QA3 4',
                'QA3 6'
            ],
            answer:6
        },
        {
            question: 'Question 4',
            options: [
                'QA4 1',
                'QA4 2',
                'QA4 3',
                'QA4 4',
                'QA4 5',
                'QA4 6',
                'QA4 7',
                'QA4 8',
                'QA4 9'
            ],
            answer:3
        },
        {
            question: 'Question 5',
            options: [
                'QA5 1',
                'QA5 2',
                'QA5 3'
            ],
            answer:2
        },
        {
            question: 'Question 6',
            options: [
                'QA6 1',
                'QA6 2',
                'QA6 3',
                'QA6 4',
                'QA6 5',
                'QA6 6',
                'QA6 7',
                'QA6 8',
                'QA6 9'
            ],
            answer:5
        },
        {
            question: 'Question 7',
            options: [
                'QA7 1',
                'QA7 2',
                'QA7 3',
                'QA7 4'
            ],
            answer:2
        }
    ];



    var questionLength = allQuestions.length,
        quiz = document.getElementById('quiz'),
        questionContainer = document.getElementById('question_container'),
        fragment = document.createDocumentFragment(),
        next = document.getElementById('nextQuestion'),
        prev = document.getElementById('prevQuestion'),
        nav = document.getElementById('nav'),
        // question,
        questionIndex,
        opt,
        currentQuestion = 0,
        correctAnswer = 0,
        dataQuestion, divElement, h2Element, ulElement;


    window.onload = function() {
        loadQuestions();
    };

    var loadQuestions = function() {

        for (questionIndex = 0; questionIndex < questionLength; questionIndex++) {

            divElement = document.createElement('div');
            h2Element = document.createElement('h2');
            ulElement = document.createElement('ul');

            h2Element.innerText = allQuestions[questionIndex].question;
            divElement.appendChild(h2Element);
            divElement.appendChild(ulElement);

            divElement.setAttribute('data-question', questionIndex);
            divElement.setAttribute('class', 'inactive');
            dataQuestion = divElement.dataset.question;

            if (dataQuestion === currentQuestion.toString()) {
                divElement.setAttribute('class', 'active');
            } else {
                divElement.setAttribute('class', 'inactive');
            }

            // Options length
            var optionsLength = allQuestions[questionIndex].options.length;

            for (opt = 0; opt < optionsLength; opt++ ) {
                var liElement = document.createElement('li'),
                    liInputElement = document.createElement('input');

                liInputElement.setAttribute('type', 'radio');
                liInputElement.setAttribute('name', 'answer'+dataQuestion);
                liInputElement.setAttribute('value', opt);


                liElement.innerText = allQuestions[questionIndex].options[opt];
                liElement.appendChild(liInputElement);
                ulElement.appendChild(liElement);

            }

            fragment.appendChild(divElement);
        }

        questionContainer.appendChild(fragment);

    };

    var eventHandler = function(e) {

        var src,
            parts,
            data;

        // get event and source element
        e = e || window.event;
        src = e.target || e.srcElement;

        data = src.dataset.nav;

        console.log(src);

        // no bubble
        if (typeof e.stopPropagation === 'function') {
            e.stopPropagation();
        }
        if (typeof e.cancelBubble !== 'undefined') {
            e.cancelBubble = true;
        }

        // prevent default action
        if (typeof e.preventDefault === 'function') {
            e.preventDefault();
        }
        if (typeof e.returnValue !== 'undefined') {
            e.returnValue = false;
        }

    };

    if (document.addEventListener) { // W3C
        quiz.addEventListener('click', eventHandler, false);
    } else if (document.attachEvent) { // IE
        quiz.attachEvent('click', eventHandler);
    } else { // last resort
        quiz.onclick = eventHandler;
    }


})();

这是 HTML:

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Week 6 Quiz App</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="/favicon.ico">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <!-- build:css styles/vendor.css -->
        <!-- bower:css -->

        <!-- endbower -->
        <!-- endbuild -->
        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
        <style type="text/css">

        .active {
            display: block;
        }

        .inactive {
            display: none;
        }

        .scoreBoard {
            display: none;
        }

        li {
            line-height: 26px;
        }

        input[type='radio'] {
            margin: 0 4px;
        }



        </style>
    </head>
    <body>
        <!--[if lt IE 10]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


        <div class="container" id="quiz">

            <div id="question_container">

                <div class="scoreBoard">
                    <h3>Score: <span id="score">0</span></3>
                </div>


            </div>
            <div id="nav">
                <button data-nav="prev">Prev</button>
                <button data-nav="next">Next</button>
            </div>

        </div>

        <!-- build:js({app,.tmp}) scripts/main.js -->
        <script src="scripts/main.js"></script>
        <!-- endbuild -->
</body>
</html>

Answer 1

这会有所帮助:http://jsfiddle.net/qrqwzg44/3/

说明:在您的代码中，防止默认行为

    // prevent default action
    if (typeof e.preventDefault === 'function') {
        e.preventDefault();
    }
   if (typeof e.returnValue !== 'undefined') {
        e.returnValue = false;
   }

这段代码有助于防止事件的默认行为。现在您想要保留 radioButton 的默认行为，您必须过滤掉 radioButton 的情况。因此，请将此更改添加到您的代码中。

// prevent default action
    if (typeof e.preventDefault === 'function' && e.target.tagName!=='INPUT') {
        e.preventDefault();
    }
   if (typeof e.returnValue !== 'undefined' && e.target.tagName!=='INPUT') {
        e.returnValue = false;
   }