19.9.26-前端-工作流中莫名post请求+回车跳click-post

1.问题
1.1 问题描述
在实现小组件的过程中——》前端界面选择本地文件，将文件显示在datatables（简称dt）中。

发生了奇妙的事件：当我点击预览和删除后，会进入预览删除按钮的监听事件，触发一个post请求；再后来，我发现在input中回车，直接跳到按钮的监听，触发post；
先说根因：按钮写的是button，button的默认type是submit，点击button，执行完监听，就会触发post；
又因为在from环境下，只有一个button（type=submit），在input中回车，就会直接触发button的submit；
如果submit的button有click监听，无论你有没有点击button，触发submit后，会先执行click里面的处理事件；
嗯，果然是他妈的常识啊，困扰了两天。。。

1.2 处理过程
（1）判断问题出在哪里：f12调试， 一步一步跟踪，中间发现fileinput（简称fi）的submit，以为是fileinput干的-因为post中有文件啊。因为fi的上传按钮是被隐藏了，根本无法点击，怎么自动触发，想不明白；
给出暂时处理：e.preventDefault();这个方法会阻止事件默认的动作（比如点击按钮的默认动作是提交submit），但是并不会阻止事件的继续传播（事件还能继续冒泡）。例如< a >标签的click默认的动作是打开链接。但是使用这个函数之后会阻止这个动作，但同时这个事件可以传播给这个标签或者更远的click listener。
还有一个阻止方法：e.stopPropagation();阻止事件进一步冒泡，进而被其他节点接收。但是不能阻止默认动作。
现在，点击预览，不进行post请求：
（2）input回车，跳到click监听事件方法中，然后post因为prevent方法被阻止，怎么进入click之后判断是不是点击的预览还是回车！
click的事件参数e，就是click事件，无法判断是不是回车。
设定一个全局变量a；设定一个监听全局的回车，a为false；click进入后，先判断a是不是false，是false，直接return；——》流产，根本不进入监听回车的方法；
查资料，事件的冒泡与捕获：所谓冒泡，是事件动作发生后，标签从最详细的input到div到body到html到documnet到window对象，从具体到模糊；所谓捕获，是从window到document到最详细的input；规则是document，但是浏览器增加了window对象为开端；目前，事件流是这么一回事——》事件捕获阶段，从document到div；input是事件发生的主体，事件处理动作就以input为参考执行，这就是处于目标阶段；然后从input一直冒泡到document，这就处于冒泡阶段；

既然捕获在前，我能否在捕获中直接改变a的状态，从而不执行click监听事件？设button的爹为div，增加div监听，没成想这是一个冒泡，先处理click监听，在执行input他爹div的监听。
再次查资料-如何进入捕获：js中，通过 addEventListener 添加任意多个事件处理函数，第三个参数用来设置是否捕获（请看下一节）来自子元素的事件，默认为false–true在捕获阶段执行，false在冒泡阶段执行。看到了么，在div监听事件中，直接设定这个方法，就能捕获，捕获的同时设定状态，click就不会执行；——》先进入a3，在进入a2；完美。注意，getclass得到的是数组，必须给数组元素addlisten，而不是给数组增加监听，会报错的。

<div class="a1a3"> <button class="btn btn-primary btn-xs btn-edit a1a2" >预览</button></div>
$('.a1a2').on('click',function () {
    debugger
    console.log('111111');
})
    var el = document.getElementsByClassName("a1a3");
    el[0].addEventListener("click", function (e) {
        debugger
        console.log('ahhaha')
    }, true);

但是，jquery无法处理捕获-on事件处理将 addeventlistener默认为false，无法修改。当时没有深入这种方法，直接想了另一种。
结论：可以在捕获阶段修改状态，从而不执行click点击；
（3）既然我直接从回车跳到click，那么我可以检测他的焦点啊！如果你的焦点在buttono上，那么你就执行click，否则return；
百度is方法用来获取焦点，但是实际测试失败了！！！
最终发现 document.activeElement 可以得到当前的焦点元素！你通过他的id或者class，都可以确认焦点元素是谁。

$('.a1a2').on('click',function () {
    var isFocus11=$('.a1a2').is(":focus"); //false
    var isFocus=$(this).is(":focus");  //false
    var is = document.activeElement; //确实得到了按钮对象
    if(true==isFocus){
        alert("focus");
    }else{
        alert("blur");
    }
})

activeElement的网上例子：
var btn = document.getElementById("btn");
    //页面加载获取焦点
    alert(document.activeElement.id) // body
    //调用focus()方法获取焦点
    btn.focus();
    alert(document.activeElement.id) // btn

结论：通过焦点，能够判断是否时回车还是click；
但是，当初不知道怎么着，直接看了button的属性，扫到了submit，卧槽，更改button的type为input，post和回车跳转都消失了！！！
卧了个槽！
总结完毕！

2.为何要两天？
如果没想到button的submit，恐怕我会一直陷在这个泥坑中。没找到根本的原因，无法阻止问题发生，但是，通过别的途径解决问题（阻止默认事件，冒泡捕获状态判断，焦点判断），风景还是很精彩的。
就这样吧。
2019年9月26日 15:03:09