Code Monkey home page Code Monkey logo

Comments (8)

cssmagic avatar cssmagic commented on June 16, 2024

谢谢建议。其实我也一直在考虑这一点,虽然技术实现并不困难,但因为要改变接口,我就比较谨慎。

我想听一下你的看法:

  • 我一时没有想到会有什么需求一定需要在动作函数里拿到事件对象。你现在遇到了吗?
  • 如果动作函数里需要用到事件对象,那 trigger 这个动作函数时如何处理?

from action.

xingmolu avatar xingmolu commented on June 16, 2024

嗯,目前我遇到了这个需求,在一个点击一个大的元素需要隐藏这个元素,但是如果点击里面某个子元素则不会隐藏,我通过e.target来判断的。

之前我写插件一半的事件触发都会返回事件对象,很多时候没有这个不行。

trigger时可以不返回,只不过使用时需要判断下

if(e){
}

还有更好的方式吗?

from action.

cssmagic avatar cssmagic commented on June 16, 2024

目前我遇到了这个需求,在一个点击一个大的元素需要隐藏这个元素,但是如果点击里面某个子元素则不会隐藏

听起来这是一个比较复杂的 UI 效果,能具体再说一说(这个需求的逻辑)吗?

from action.

xingmolu avatar xingmolu commented on June 16, 2024

一个类似于花瓣详情的效果,点开列表中的一个,再当前页面弹出详情。

<div class="picture-view-window" data-action="close-detail">
    <div class="view-datil">
     <!--详情内容-->
    </div>
    <a javascript:; class="window-close"><a>
</div>
.picture-view-window{
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     padding: 50px 0 0;
     z-index: 20;
     background: rgba(0,0,0,0.4);
     background: #000 \9;
     filter: alpha(opacity=40);
     overflow: auto;
}

.view-datil{
    position: absolute;
    left: 50%;
    margin: 0 0 0 -495px;
}

需要点击.picture-view-window.window-close来关闭详情,但是点击.view-datil不会关闭。

from action.

cssmagic avatar cssmagic commented on June 16, 2024

好的,我顺便看了一眼花瓣网,懂了。

我说下我的看法吧。我觉得问题不在于 Action 或者是事件机制是不是够强,而是结构需要理一下:

body
    div.list  // 列表
        …
    div.picture-view-window  // 详情窗口
        div.view-detail  // 详情主体
            …
        div.overlay @data-action='close-detail'  // 详情遮罩层
        a.window-close @data-action='close-detail'  // 详情关闭按钮

这样,用 div.overlay 来承担 “点击空白处关闭” 的任务,整个结构和事件会清晰很多。

让父元素(div.picture-view-window)去判断点击事件的来源再做不同处理,这个做法看似高端,但把事情搞复杂了,没有必要。

from action.

xingmolu avatar xingmolu commented on June 16, 2024

恩,这个场景下是可以的。不过我一般的写插件,事件都会返回原生event或者加工过的event

from action.

cssmagic avatar cssmagic commented on June 16, 2024

嗯,理解你的意思。不过我对此还是比较谨慎。

总体上,我希望 Action 是足够简单的:如果使用者真的需要操心具体的事件对象,那可能说明当前的场景太过复杂,用 Action 来处理事件可能就不是一个合适的选择。

另外,.trigger() 这个 API 也会比较尴尬。写每个动作函数时都需要判一下有没有 ev,这个解决方案真的很难接受,使用成本一下子就上去了。

因此,在找到非常明朗的理由之前,应该不会加这个功能。望理解。

from action.

xingmolu avatar xingmolu commented on June 16, 2024

嗯,可以。我fork后改了,确实大多数场景换个方案都可以实现。暂时没有遇到非要ev的问题。谢谢

from action.

Related Issues (16)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.