关于Android中webview加载js的问题

Question

这是现在的效果，当用户点击一级标签是会显示出红色区域，我现在想把红色区域中每条记录都写成相对独立且可以添加上点击事件的，求教该如何去修改js的代码

/********************主页面功能列表相关函数******************** */
function createFocusItem(focusId, focusIconSrc, focusItemInfo, index, languageModeShow) {
    var item = document.createElement("div");
    item.id = focusId;
    item.className = "css_dialog_focus_item";
    if(languageModeShow==false){
        item.style.display = "none";
    }
    /*******************************************/

    var preview = document.createElement("img");
    preview.id = focusId + "_preview";
    preview.className = "css_dialog_focus_preview";
    preview.src = focusIconSrc;

    /*******************************************/

    var item_overview = document.createElement("div");
    item_overview.id = focusId + "_overview";
    item_overview.className = "css_dialog_focus_overview";
    if(index %2 == 1){
        item_overview.style.backgroundColor = "#f3f3f5";
    }

    var focus_Icon_container = document.createElement("div");
    focus_Icon_container.id = focusId + "_overview_icon_container";
    focus_Icon_container.className = "css_dialog_focus_icon_container";

    var focus_Icon = document.createElement("img");
    focus_Icon.id = focusId + "_normal";
    focus_Icon.src = focusIconSrc;
    focus_Icon.className = "css_dialog_focus_icon";

    var focus_Icon_pressed = document.createElement("img");
    focus_Icon_pressed.id = focusId + "_pressed";
    focus_Icon_pressed.className = "css_dialog_focus_icon_pressed";
    focus_Icon_pressed.src = focusIconSrc;

    focus_Icon_container.appendChild(focus_Icon);
    focus_Icon_container.appendChild(focus_Icon_pressed);

    var focus_describe = document.createElement("span");
    focus_describe.className = "css_dialog_focus_describe";

    var focus_describe_title = document.createElement("div");
    focus_describe_title.id = focusId + "_overview_title";
    focus_describe_title.className = "css_dialog_focus_describe_title";
    focus_describe_title.innerText = focusItemInfo.describeTitle;

    var focus_describe_func = document.createElement("div");
    focus_describe_func.id = focusId + "_overview_func";
    focus_describe_func.className = "css_dialog_focus_describe_func";
    focus_describe_func.innerText = focusItemInfo.describeFunc;

    focus_describe.appendChild(focus_describe_title);
    focus_describe.appendChild(focus_describe_func);

    var fold_Icon = document.createElement("img");
    fold_Icon.id = focusId + "_overview_fold";
    fold_Icon.src = dialog_arrow_down_normal;
    fold_Icon.className = "css_dialog_focus_fold";

    item_overview.appendChild(focus_Icon_container);
    item_overview.appendChild(focus_describe);
    item_overview.appendChild(fold_Icon);

    var item_detail = document.createElement("div");
    item_detail.id = focusId + "_detail";
    item_detail.className = "css_dialog_focus_detail";

    var item_detail_canvas = document.createElement("canvas");
    item_detail_canvas.id = focusId + "_detail_bg";

    var item_detail_context = item_detail_canvas.getContext("2d");

    var item_detail_text = document.createElement("div");
    item_detail_text.id = focusId + "_detail_text";
    item_detail_text.className = "css_dialog_focus_detail_text"
    item_detail_text.innerHTML = focusItemInfo.details;

    item_detail.appendChild(item_detail_canvas);
    item_detail.appendChild(item_detail_text);

    item.appendChild(preview);
    item.appendChild(item_overview);
    item.appendChild(item_detail);
    return item;
}

以上便是js中关于上图布局的代码，请问我该如何修改才能实现二级标签中每条记录都是相对独立且能够添加点击事件呢？

Answer 1

1. 给每条二级标签都添加一个类，比如：class="click-event"。
   click-event 设置属性：cursor: pointer;(主要是确保对元素的点击必然有效)

2. js 中监听点击事件：

   document.addEventListener('click', function (e) {
        // ... 需要执行的操作
    }, false);

3. 如果需要每个二级标签点击后都有不同的操作，可以在二级标签对应的 div (或其他)标签中添加data-type="type1"，根据 type 不同分别写不同的操作。

    /**
     * @param e
     */
    function clickEvent(e) {
        const type = e.target.dataset.type || '';
        switch (type) {
            case "type1": {
                // ... 需要执行的操作
                break;
            }
            default: {
                // default
            }
        }
    }
   
    document.addEventListener('click', clickEvent, false);